JS编写兼容IE6,7,8浏览器无缝自动轮播
网络 2018-11-12 2702
项目要求页面兼容IE6,7,8等浏览器，我们可能会遇到这个轮播效果，轮播板块要求：无限循环、自动轮播和手动切换功能，每一次滚动一小格，网上有很多这类插件，例如:swiper等！
但是很多都是不兼容IE6,7,8这些低级浏览器的，没有办法，只能自己写一个类似的轮播插件
废话不多说，直接上代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <!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> |
希望这篇文章能帮到大家，喜欢技术交流的可以关注我，一起交流前端技术
