快捷導(dǎo)航

JS編寫兼容IE6,7,8瀏覽器無(wú)縫自動(dòng)輪播

更新時(shí)間：2018年10月12日 11:03:15 投稿：laozhang

在本篇文章里我們給大家?guī)?lái)一篇關(guān)于用原生JS編寫兼容IE6,7,8瀏覽器無(wú)縫自動(dòng)輪播的相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。

項(xiàng)目要求頁(yè)面兼容IE6,7,8等瀏覽器，我們可能會(huì)遇到這個(gè)輪播效果，輪播板塊要求：無(wú)限循環(huán)、自動(dòng)輪播和手動(dòng)切換功能，每一次滾動(dòng)一小格，網(wǎng)上有很多這類插件，例如:swiper等！

但是很多都是不兼容IE6,7,8這些低級(jí)瀏覽器的，沒有辦法，只能自己寫一個(gè)類似的輪播插件

廢話不多說，直接上代碼:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="js/jquery-1.8.3-20180801.min.js"></script>
  <style>
   *{margin: 0;padding: 0;}
   div{position: relative;width: 1000px;overflow: hidden;height: 100px;line-height:100px;}
   ul{position: absolute;list-style: none;overflow: hidden;}
   li{float: left;width: 200px;height: 100px;text-align:center;color:#fff;}
   a{position: absolute;color:#fff;margin:0 10px;font-size:30px;text-decoration:none;}
  </style>
 </head>
 <body>
  <div>
   <ul>
    <li style="background: red;">1</li>
    <li style="background: yellow;">2</li>
    <li style="background: blue;">3</li>
    <li style="background: black;">4</li>
    <li style="background: green;">5</li>
    <li style="background: orange;">6</li>
    <li style="background: skyblue;">7</li>
    <li style="background: blue;">8</li>
    <li style="background: green;">9</li>
    <li style="background: orange;">10</li>
    <li style="background: skyblue;">11</li>
   </ul>
   <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="prev" style="left:0px;">←</a>
   <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="next" style="right:0px;">→</a>
  </div> 
 </body>
 <script type="text/javascript">
  var fli = $("ul li").clone(true);
  var oul = $("ul");
  oul.append(fli);
  oul.width($("ul li").eq(0).width()*$("ul li").length);
  var inow = 0;
  var timer = null;
   
  $("div").mouseover(function(){
   clearInterval(timer);
  })
  $("div").mouseout(function(){
   autoplay();
  })
   
  $(".next").click(function(){
   if(inow == $("ul li").length/2){
    oul.css("left","0px");
    inow = 1;
   }else{
    inow++;
   }
   var leng = -inow*$("ul li").eq(0).width()+"px"; 
   oul.animate({"left":leng});
  })
  $(".prev").click(function(){
   if(inow == 0){
    var ml = -$("ul li").eq(0).width()*($("ul li").length/2)+"px";
    oul.css("left",ml);
    inow = $("ul li").length/2-1;
   }else{
    inow--;
   }
   var leng = -inow*$("ul li").eq(0).width()+"px";
   oul.animate({"left":leng});
  })
  function autoplay(){
    timer = setInterval(function(){
    if(inow == $("ul li").length/2){
     oul.css("left","0px");
     inow = 1;
    }else{
     inow++;
    }
    console.log(inow);
    var leng = -inow*$("ul li").eq(0).width()+"px";
    oul.animate({"left":leng});
   },2000);
  }
  autoplay();
 </script>
</html>

希望這篇文章能幫到大家，喜歡技術(shù)交流的可以關(guān)注我，一起交流前端技術(shù)。感謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: