JS左右無縫輪播功能完整實例

更新時間：2019年05月16日 10:26:47 作者：辣姐什么鬼

這篇文章主要介紹了JS左右無縫輪播功能,結合完整實例形式分析了javascript事件響應及頁面元素屬性動態(tài)變換相關操作技巧,需要的朋友可以參考下

本文實例講述了JS左右無縫輪播功能。分享給大家供大家參考，具體如下：

其中對上一頁下一頁按鈕設置visibility屬性是為了解決輪播中點擊上一頁下一頁導致的bug，應為是a標簽所以用了visibility屬性，如果是按鈕button可以直接設置在輪播過程中按鈕不可點擊，當然其他解決方法都可以，以實際為準

代碼如下：換換圖片就可以直接用

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.fzitv.net JS左右無縫輪播</title>
  <style>
    * {margin:0;padding:0;}
    #scrollImg{width:1000px;margin:100px auto;}
    #prev{float:left;line-height:250px;}
    #next{float:right;line-height:250px;}
    #div1 {width:800px;height:250px;margin:0px auto;position:relative;overflow:hidden;}
    #div1 ul {position:absolute;left:0;top:0;}
    #div1 ul li {float:left;list-style:none;width:200px;height:250px;}
    #div1 ul li img{width:100%;height:100%;}
  </style>
</head>
<body>
<div id="scrollImg">
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="prev">向左</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="next">向右</a>
  <div id="div1">
    <ul>
      <li><img src="image/0.jpeg" /></li>
      <li><img src="image/1.JPEG" /></li>
      <li><img src="image/3.jpg" /></li>
      <li><img src="image/4.jpeg" /></li>
    </ul>
  </div>
</div>
<script>
  window.onload=function(){
    var oDiv=document.getElementById("div1");
    var oUl=document.getElementsByTagName("ul")[0];
    var oLi=document.getElementsByTagName("li");
    var index=0;
    var timer;//定時器
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//將輪播內容復制一份
    oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
    //移動速度
    var speed=-10;
    //控制滾動的方向
    var prev=document.getElementById("prev");
    var next=document.getElementById("next");
    //上一頁
    prev.onclick=function(){
      if(index==4){
        index=1;
        oUl.style.left="0px";
      }else{
        index++;
        speed=10;
      }
      move();
    };
    //下一頁
    next.onclick=function(){
      if(index==0){
        index=3;
        oUl.style.left=-oUl.offsetWidth/2+"px";
      }else{
        index--;
        speed=-10;
      }
      move();
    };
    function move(){
      timer=setInterval(function () {
        oUl.style.left=oUl.offsetLeft-speed+"px";
        var stop=-index*oLi[0].offsetWidth+"px";
        prev.style.visibility="hidden";
        next.style.visibility="hidden";
        if(oUl.style.left==stop){
          clearInterval(timer);
          prev.style.visibility="visible";
          next.style.visibility="visible";
        }
      },20);
    }
  }
</script>
</body>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

Bootstrap模態(tài)框使用詳解
這篇文章主要為大家詳細介紹了Bootstrap模態(tài)框的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
如何正確理解javascript的模塊化
模塊化在項目中十分的重要，一個復雜的項目肯定有很多相似的功能模塊，如果每次都需要重新編寫模塊肯定既費時又耗力。但是引用別人編寫模塊的前提是要有統(tǒng)一的“打開姿勢”，如果每個人有各自的寫法，那么肯定會亂套，下面介紹幾種JS的模塊化的規(guī)范。
2017-03-03
這篇文章主要介紹了微信小程序中使用Async-await方法異步請求變?yōu)橥秸埱蠓椒?，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-03-03