js多张图片循环平移

来源：互联网发布：js统计当前用户在线数编辑：程序博客网时间：2024/05/16 18:26
在前文 js单张图片平移切换的基础上做的改进。
大概这样的效果……
这里写图片描述
里面那组正方形的图们匀速往左移动，类似那种滚动画廊的效果？
当然外面那个有描边的图也定时切换（不过这不是本文的重点）。
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="css/animate.css">    <script src="js/jquery-1.10.1.min.js"></script></head><body>  <!-- 这是上面的红边，只是为了好看，不要在意 --><div style="width: 100%;height: 50px;background: #ea150b"></div><!-- 正经内容从这里开始 -->    <div class="wrapper">      <!-- 看到泛白的背景图片了吗，那个泛白的效果是这里……真实图片放在wrapper的background里 -->        <div class="background_pics"></div>        <h1>THIS IS MEIKO!</h1>          <!-- 图组在这里，url里的链接自行替换 -->        <div id="focus">              <ul>                 <li><div class="switch_pic" style="background: url('imgs/01.jpg') center center;background-size: cover;"></div></li>                 <li><div class="switch_pic" style="background: url('imgs/02.jpg') center center;background-size: cover;"></div></li>                 <li><div class="switch_pic" style="background: url('imgs/03.jpg') center center;background-size: cover;"></div></li>                 <li><div class="switch_pic" style="background: url('imgs/04.jpg') center center;background-size: cover;"></div></li>               <li><div class="switch_pic" style="background: url('imgs/meiko2.jpg') center center;background-size: cover;"></div></li>               <li><div class="switch_pic" style="background: url('imgs/meiko7.jpg') center center;background-size: cover;"></div></li>           </ul>         </div>         <!-- 最顶层那个带描边的人物抠图，可以把这删掉，因为这里面涉及到了lazyload（见参考链接）和animate.css（见参考链接），暂时不想解释（。） -->       <div class="switch_hero">           <div class="chara_switch" data-src='imgs/meikoA.png'></div>           <div class="chara_switch js_hide" data-src='imgs/meikoB.png'></div>           <div class="chara_switch js_hide" data-src='imgs/meikoC.png'></div>       </div>       <!-- 一个只是为了好看姑且加上的按钮 -->       <div class="switch_btn">           <div class="this_button">> 点击了解更多</div>       </div>   </div>     <!-- 下半部分的红边，除了好看一无是处 -->   <div style="width: 100%;height: 50px;background: #ea150b"></div>   <!-- 多嘴一句，使用lazyload的话千万不能在head里引用，需要在body里引用，原理不清楚 -->   <script type="text/javascript" src="js/lazyload.min.js"></script>   <script type="text/javascript">    $(function() {          new LazyLoad({            elements_selector: ".chara_switch"//lazyload的基本用法，就这一句话。        });        //原理和单张图片平移一样的        //多个图片一直移动，一个图片移动到最左在屏幕里消失后，就移到最右的末端开始下一次左移，无限循环。        var sWidth = $("#focus ul li").width()+20; //获取每张图片的宽度，因为我设了margin，所以每张图要在原有宽度上再加一点margin的距离         var len = $("#focus ul li").length; //获取图片个数          var index = 0;          var loop = 0;        var picTimer;          var $pics = $("#focus ul").find('li');//这里的移动是移动的li，而不是li里的div了。        showPics(index);          picTimer = setInterval(function() {              index++;  //index不再需要反复致零            showPics(index);          },9000);         function showPics(index) { //普通切换              var nowLeft = -sWidth*(index+1); //整个ul无限左移            var $pic = $pics.eq(index%len);//用求余获得图片的index            $("#focus ul").animate({"left":nowLeft},9000,"linear",function(){            //这里不会解释……自己运行的时候按F12观察一下left是怎么变动的就理解了……                if(index%len == 0){                    loop++;                }                $pic.css("left",sWidth*(len*loop));            });        }  //下面是最前端的描边人物的交替动画，可无视，可删除。        var indexChara = 0;        var $charas = $(".switch_hero").find('.chara_switch');        var charalen = $charas.length;        // switchCharas(indexChara);          setInterval(function() {            switchCharas(indexChara);              indexChara++;              if(indexChara == charalen) {indexChara = 0;}          },5000);         function switchCharas(indexChara) { //普通切换              var $chara = $charas.eq(indexChara%charalen);            var $nextchara = $charas.eq((indexChara+1)%charalen);//这里用的是animate.css，js_hide自己写的，大概就是什么display:none啊visibility: hidden啊这类的设置。            $nextchara.removeClass('js_hide');            $nextchara.addClass('animated fadeIn');            $nextchara.one('animationend', function() {                $(this).removeClass('animated fadeIn');                $(this).removeClass('js_hide');            });            $chara.addClass('animated fadeOut');            $chara.one('animationend', function() {                $(this).removeClass('animated fadeOut');                $(this).addClass('js_hide');            });        }      });  </script><style type="text/css">    *{margin:0;padding:0;}      body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}      .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}      .clearfix{zoom:1;}      ul,li{list-style:none;}      img{border:0;}      .wrapper{width:100%;height: 600px;margin:0 auto;background: url('imgs/THISBG.jpg') center center;background-size: cover;position: relative;}      h1{height:50px;line-height:50px;font-size:36px;font-weight:bold;font-family:"Microsoft YaHei",SimHei;position: absolute;color: black;left: 20px;top: 20px}      /* focus */      #focus{padding-top: 150px;width:100%;height:350px;overflow:hidden;position:relative;z-index: 10}      #focus ul{width:3000px;height:380px;position:relative;white-space:nowrap;}      #focus ul li{display: inline-block;float:left;width:350px;height:350px;position:relative;background:#000;margin:0px 10px }      #focus ul li div{position:absolute;width: 350px;height: 350px;}      .background_pics{        height: 600px;        width: 100%;        position: absolute;        background: rgba(255,255,255,0.8);    }    .switch_hero{        height: 600px;        width: 100%;        position: absolute;        top: 0px;        z-index: 15;    }    .chara_switch{        position: absolute;        height: 600px;        width: 100%;        background: no-repeat center center;        background-size: auto 600px;        background-position: right;    }    .switch_btn{        position: absolute;        top: 0px;        height: 600px;        width: 100%;        z-index: 20;    }    .switch_btn:hover{        cursor: pointer;    }    .this_button{        position: absolute;        height: 40px;        width: 210px;        bottom: 40px;        margin: 0 auto;        right: 0px;        left: 0px;        background: rgba(0,0,0,0.4);        color: white;        text-align: center;        line-height: 40px;        font-size: 18px;        font-weight: bold;        border: 2px solid #fff;        border-radius: 5px;    }    /*忘了哪里看的玄学,说是    position: absolute;    margin: 0 auto;    right: 0px;    left: 0px;    就可以居中（。    */</style></body>
参考链接：
lazyload：verlok/lazyload
animate.css：daneden/animate.css
阅读全文
0 0