项目要求页面兼容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; 1000px;overflow: hidden;height: 100px;line-height:100px;} 10 ul{position: absolute;list-style: none;overflow: hidden;} 11 li{float: left; 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>
希望这篇文章能帮到大家，喜欢技术交流的可以关注我，一起交流前端技术。