猿来是你三十而立，砥砺前行，不忘初心，勇闯猿类

原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

项目要求页面兼容IE6,7,8等浏览器，我们可能会遇到这个轮播效果，轮播板块要求：无限循环、自动轮播和手动切换功能，每一次滚动一小格，网上有很多这类插件，例如:swiper等！

但是很多都是不兼容IE6,7,8这些低级浏览器的，没有办法，只能自己写一个类似的轮播插件

废话不多说，直接上代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/jquery-1.8.3-20180801.min.js"></script>
 7         <style>
 8             *{margin: 0;padding: 0;}
 9             div{position: relative;width: 1000px;overflow: hidden;height: 100px;line-height:100px;}
10             ul{position: absolute;list-style: none;overflow: hidden;}
11             li{float: left;width: 200px;height: 100px;text-align:center;color:#fff;}
12             a{position: absolute;color:#fff;margin:0 10px;font-size:30px;text-decoration:none;}
13         </style>
14     </head>
15     <body>
16         <div>
17             <ul>
18                 <li style="background: red;">1</li>
19                 <li style="background: yellow;">2</li>
20                 <li style="background: blue;">3</li>
21                 <li style="background: black;">4</li>
22                 <li style="background: green;">5</li>
23                 <li style="background: orange;">6</li>
24                 <li style="background: skyblue;">7</li>
25                 <li style="background: blue;">8</li>
26                 <li style="background: green;">9</li>
27                 <li style="background: orange;">10</li>
28                 <li style="background: skyblue;">11</li>
29             </ul>
30             <a href="javascript:void(0)" class="prev" style="left:0px;">←</a>
31             <a href="javascript:void(0)" class="next" style="right:0px;">→</a>
32         </div>    
33     </body>
34     <script type="text/javascript">
35         var fli = $("ul li").clone(true);
36         var oul = $("ul");
37         oul.append(fli);
38         oul.width($("ul li").eq(0).width()*$("ul li").length);
39         var inow = 0;
40         var timer = null;
41         
42         $("div").mouseover(function(){
43             clearInterval(timer);
44         })
45         $("div").mouseout(function(){
46             autoplay();
47         })
48         
49         $(".next").click(function(){
50             if(inow == $("ul li").length/2){
51                 oul.css("left","0px");
52                 inow = 1;
53             }else{
54                 inow++;
55             }
56             var leng = -inow*$("ul li").eq(0).width()+"px"; 
57             oul.animate({"left":leng});
58         })
59         $(".prev").click(function(){
60             if(inow == 0){
61                 var ml = -$("ul li").eq(0).width()*($("ul li").length/2)+"px";
62                 oul.css("left",ml);
63                 inow = $("ul li").length/2-1;
64             }else{
65                 inow--;
66             }
67             var leng = -inow*$("ul li").eq(0).width()+"px";
68             oul.animate({"left":leng});
69         })
70         function autoplay(){
71                 timer = setInterval(function(){
72                 if(inow == $("ul li").length/2){
73                     oul.css("left","0px");
74                     inow = 1;
75                 }else{
76                     inow++;
77                 }
78                 console.log(inow);
79                 var leng = -inow*$("ul li").eq(0).width()+"px";
80                 oul.animate({"left":leng});
81             },2000);
82         }
83         autoplay();
84     </script>
85 </html>

希望这篇文章能帮到大家，喜欢技术交流的可以关注我，一起交流前端技术。

posted @ 2018-09-28 10:58  青瑟少年  阅读(926)  评论(0)  编辑  收藏  举报