javascript實(shí)現(xiàn)多張圖片左右無(wú)縫滾動(dòng)效果

更新時(shí)間：2017年03月22日 11:12:43 作者：wmaqingbo

本文主要介紹了javascript實(shí)現(xiàn)多張圖片左右無(wú)縫滾動(dòng)效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

結(jié)構(gòu)：box包含ul，ul包含4個(gè)li；ul絕對(duì)定位。

復(fù)制li-1、li-2到第li-4后面，為了區(qū)分于li-1、li-2，內(nèi)容改為li-5、li-6，顏色不變。此時(shí)ul包含6個(gè)li。

需要注意的是，移動(dòng)的是ul這個(gè)大盒子而不是li。

原理：當(dāng)ul 絕對(duì)定位的left 值等于（li-1+li-2+li-3+li-4）的寬度時(shí)，利用JavaScript快速?gòu)?fù)原left 值為0 。

此時(shí)請(qǐng)注意盒子里面數(shù)字和顏色的變化！

效果圖：

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style media="screen">
  *{
   padding: 0;
   margin: 0;
  }
  ul,li {
   list-style: none;
  }
  img {
   vertical-align: top;
  }
  #box{
   width: 400px;
   height: 100px;
   margin: 100px auto;
   background-color: pink;
   position: relative;
   overflow: hidden;
  }
  #box ul {
   width: 2000px;
   position: absolute;
   left: 0;
   top: 0;
  }
  #box li {
   float: left;
  }
  .aa {
   width: 200px;
   height: 100px;
  }
  .li-1{
   background-color: #f6e659;
  }
  .li-2{
   background-color: #57fa4f;
  }
  .li-3{
   background-color: #3a8ef1;
  }
  .li-4{
   background-color: #c057f1;
  }
 </style>
</head>
<body>
 <div id="box">
  <ul>
   <li class="li-1 aa">li-1</li>
   <li class="li-2 aa">li-2</li>
   <li class="li-3 aa">li-3</li>
   <li class="li-4 aa">li-4</li>
   <li class="li-1 aa">li-5</li>
   <li class="li-2 aa">li-6</li>
  </ul>
 </div>
</body>
</html>
<script type="text/javascript">
 var box = document.getElementById("box");
 var ul = box.children[0];
 var num = 0;
 timer = setInterval(fn,10);
 function fn() {
  num--;
  num <= -800 ? num = 0 : num;
  ul.style.left = num + "px";
 }
</script>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能,結(jié)合實(shí)例形式分析了javascript遍歷json數(shù)組相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
js中如何對(duì)json數(shù)組進(jìn)行排序
這篇文章主要介紹了js中如何對(duì)json數(shù)組進(jìn)行排序的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
為數(shù)據(jù)添加append,remove功能
為數(shù)據(jù)添加append,remove功能...
2006-10-10
Javascript 網(wǎng)頁(yè)水印(非圖片水印)實(shí)現(xiàn)代碼
在一些B/S結(jié)構(gòu)的應(yīng)用系統(tǒng)中，有很多頁(yè)面是需要有水印的。常見(jiàn)的就是公文系統(tǒng)、合同系統(tǒng)等。
2010-03-03
javascript實(shí)現(xiàn)多邊形碰撞檢測(cè)
這篇文章主要介紹了javascript如何實(shí)現(xiàn)多邊形碰撞檢測(cè)，幫助大家更好的理解和使用js，感興趣的朋友可以了解下
2020-10-10
js實(shí)現(xiàn)的后臺(tái)左側(cè)管理菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)的后臺(tái)左側(cè)管理菜單代碼,可實(shí)現(xiàn)美觀大氣的左側(cè)折疊菜單效果,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式變換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-09-09
前端彈出對(duì)話框 js實(shí)現(xiàn)ajax交互
這篇文章主要為大家詳細(xì)介紹了前端彈出對(duì)話框，js實(shí)現(xiàn)ajax交互，感興趣的小伙伴們可以參考一下
2016-09-09
微信小程序之 catalog 切換實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序之 catalog 切換實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
webpack本地開(kāi)發(fā)環(huán)境無(wú)法用IP訪問(wèn)的解決方法
下面小編就為大家分享一篇webpack本地開(kāi)發(fā)環(huán)境無(wú)法用IP訪問(wèn)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
深入理解JavaScript?變量對(duì)象
變量對(duì)象是與執(zhí)行上下文相關(guān)的數(shù)據(jù)作用域，存儲(chǔ)了在上下文中定義的變量和函數(shù)聲明，本文主要介紹了JavaScript?變量對(duì)象，具有一定的參考價(jià)值，感興趣的可以了解一下
2022-05-05