快捷導(dǎo)航

jquery實(shí)現(xiàn)圖片平滑滾動(dòng)詳解

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

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

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

隨便寫(xiě)了個(gè)DOM，沒(méi)有美觀性，見(jiàn)諒

原理：

1、定義兩組ul列表放圖，第一個(gè)ul放5張圖，第二個(gè)ul為空
2、為什么要用兩個(gè)ul？因?yàn)橐玫絡(luò)Query的克隆方法clone()。把第一個(gè)ul的圖片全部克隆到第二個(gè)ul中，形成并列無(wú)縫滾動(dòng)效果
3、.box設(shè)置為絕對(duì)定位，.wrap設(shè)置為相對(duì)定位
4、設(shè)置定時(shí)器，讓.box的left值一直減-，當(dāng)left值大于第一個(gè)ul的長(zhǎng)度時(shí)，讓他left等于0，然后再重新重置定時(shí)器，繼續(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è)置一個(gè)定時(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è)置滾動(dòng)速度為2
    $('.box').css('left',$left+'px');//left賦值
    if($left<-1500){//當(dāng)box值小于-1500px時(shí)，重置.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都會(huì)做了。

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

您可能感興趣的文章:

相關(guān)文章

jQuery中trigger()與bind()用法分析
這篇文章主要介紹了jQuery中trigger()與bind()用法,結(jié)合實(shí)例形式分析了trigger()與bind()的功能、定義及具體使用技巧,需要的朋友可以參考下
2015-12-12
jQuery模仿京東/天貓商品左側(cè)分類(lèi)導(dǎo)航菜單效果
在京東或者是天貓上可以看到左側(cè)分類(lèi)導(dǎo)航菜單，當(dāng)鼠標(biāo)滑過(guò)導(dǎo)航分類(lèi)時(shí)，會(huì)出現(xiàn)詳細(xì)分類(lèi)模塊，鼠標(biāo)移開(kāi)就會(huì)恢復(fù)默認(rèn)樣式，下面小編給大家?guī)?lái)了基于 mouseenter()和mouseleave()實(shí)現(xiàn)仿京東/天貓商品左側(cè)分類(lèi)導(dǎo)航菜單效果，一起看看吧
2016-06-06
字太多用...代替的方法（兩種）
本文主要介紹了字太多用...代替的兩種方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
jquery統(tǒng)計(jì)用戶(hù)選中的復(fù)選框的個(gè)數(shù)
使用選擇器得到所有被勾選的復(fù)選框元素的集合，然后通過(guò)判斷元素的個(gè)數(shù)來(lái)得到用戶(hù)勾選的個(gè)數(shù),需要的朋友可以參考下
2014-06-06
jQuery中實(shí)現(xiàn)prop()函數(shù)控制多選框(全選,反選)
下面小編就為大家?guī)?lái)一篇jQuery中實(shí)現(xiàn)prop()函數(shù)控制多選框(全選,反選)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
淺談Jquery為元素綁定事件
jQuery 使用on綁定動(dòng)態(tài)生成的元素時(shí)，不能直接用該對(duì)象操作，而是選擇其非動(dòng)態(tài)生成的父節(jié)點(diǎn)然后再找到本身才能達(dá)到效果。大家看看源碼就知道了。
2015-04-04
JQuery.Ajax之錯(cuò)誤調(diào)試幫助信息介紹
本篇文章是對(duì)JQuery.Ajax中的錯(cuò)誤調(diào)試幫助信息進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-07-07
jQuery遍歷頁(yè)面所有CheckBox查看是否被選中的方法
這篇文章主要介紹了jQuery遍歷頁(yè)面所有CheckBox查看是否被選中的方法,涉及jQuery鏈?zhǔn)讲僮骷搬槍?duì)CheckBox的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
jMessageBox 基于jQuery的窗口插件
在WinForm程序開(kāi)發(fā)中，經(jīng)常用MessageBox彈出某些提示，功能雖簡(jiǎn)單但卻非常的實(shí)用！而在Web頁(yè)面中，瀏覽器也提供了Alert或Confirm等腳本語(yǔ)句用于彈出提示窗口
2009-12-12
通過(guò)Ajax使用FormData對(duì)象無(wú)刷新上傳文件方法
這篇文章主要介紹了通過(guò)Ajax使用FormData對(duì)象無(wú)刷新上傳文件方法，具有一定的參考價(jià)值，感興趣的朋友可以了解一下。
2016-12-12