快捷導(dǎo)航

jquery實現(xiàn)圖片平滑滾動詳解

更新時間：2017年03月22日 17:24:12 作者：馮葉青

這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)圖片平滑滾動的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery圖片平滑滾動效果的具體代碼，供大家參考，具體內(nèi)容如下

隨便寫了個DOM，沒有美觀性，見諒

原理：

1、定義兩組ul列表放圖，第一個ul放5張圖，第二個ul為空
2、為什么要用兩個ul？因為要用到j(luò)Query的克隆方法clone()。把第一個ul的圖片全部克隆到第二個ul中，形成并列無縫滾動效果
3、.box設(shè)置為絕對定位，.wrap設(shè)置為相對定位
4、設(shè)置定時器，讓.box的left值一直減-，當(dāng)left值大于第一個ul的長度時，讓他left等于0，然后再重新重置定時器，繼續(xù)執(zhí)行

代碼部分：

//CSS

*{margin: 0;padding: 0}
ul{list-style: none}
.box ul li{display: block;float: left;width: 300px;height: 300px;margin-right: -1px;background-size: cover;background-position: center center;}
.box{height: 300px;width:3010px;}
#box1,#box2{float: left}
.wrap{position: relative;width: 800px;margin: auto;height: 300px;overflow: hidden}
.box{position: absolute;left: 0;}

//HTML

<body>
  <div class="wrap">
    <div class="box">
      <ul id="box1">
        <li style="background:url(images/1.jpg) no-repeat"></li>
        <li style="background:url(images/2.jpg) no-repeat"></li>
        <li style="background:url(images/3.jpg) no-repeat"></li>
        <li style="background:url(images/4.jpg) no-repeat"></li>
        <li style="background:url(images/5.jpg) no-repeat"></li>
      </ul>
      <ul id="box2"></ul>
    </div>
  </div>
</body>

//JQUERY

<script>
  var timer='';//設(shè)置一個定時器
  var $box1=$('#box1').children().clone(true);/*克隆box1的子元素*/
  $('#box2').append($box1);//將復(fù)制的元素插入到#box2中
  var $left=parseInt($('.box').css('left'));//獲取.box的left值
  var scroll=function(){
    $left-=2;//設(shè)置滾動速度為2
    $('.box').css('left',$left+'px');//left賦值
    if($left<-1500){//當(dāng)box值小于-1500px時，重置.box left值為0；
      $('.box').css('left','0');
      $left=0;
    }
    timer =setTimeout(scroll,30);
  }
  setTimeout(scroll,100);
  $('.wrap').hover(function(){
    clearTimeout(timer);
  },function(){
    setTimeout(scroll,100);
  });
</script>

主要是理解思路，思路理清了，相信你不用看dom都會做了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: