JS编写兼容IE6 7 8浏览器无缝自动轮播

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

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

废话不多说，直接上代码：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title script type=' text/JavaScript ' src=' http : js/jquery-1。8 .3-2018 08 01 .量滴js '/脚本样式* { margin 3360 0 0padd : 0；} div {位置：相对宽度： 1000像素；飞越：隐藏；高度： 100像素；线高：100 px} ul { position : absolute list-style :无；飞越：隐藏；} li {左侧浮动：宽度： 200像素；高度： 100像素；文本对齐：居中；color : # fff } a { position : absolute ecolor : # fffmargin 33600 10px font-size :30 px；文本装饰：无；}/style/head body div ul Li style='背景：红色；'1/李莉风格='背景：黄色；'2/李莉风格='背景：蓝色；'3/李丽风格='背景：黑色；'4/李丽风格='背景：绿；'5/李丽风格='背景：橙色；'6/李丽风格='背景：天蓝；'7/李莉风格='背景：蓝色；'8/Li Li style='背景：绿色；'9/李丽风格='背景：橙色；'10/Li Li style='背景：天蓝；'11/Li/ul a href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' class=' prev ' style=' left :0 px；'a href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' class=' next ' style=' right :0 px；'a/div/body脚本类型=' text/JavaScript ' var fli=$(' ul Li ').克隆（真);var oul=$(' ul ')；乌尔。追加(fli)；oul.width($('ul li ').等式(0).width()*$('ul li ').长度);var inow=0；定义变量计时器=null $(“div”).鼠标悬停(function(){ clearInterval(timer))；})$(“div”).鼠标移出(function(){ autoplay()；}) $('.下一个')。单击(函数(){ if(inow==$('ul li ')).length/2){ oul.css('left '，' 0px ')；inow=1；} else { inow } var leng=-inow * $(' ul Li ').等式(0).width()" px "；乌尔。动画({ ' left ' : leng })；}) $('.prev ').单击(function(){ if(inow==0){ var ml=-$(' ul Li ').等式(0).width()*($('ul li ').长度/2)' px '；oul.css('left '，ml)；inow=$('ul li ').长度/2-1;} else { inow-；} var leng=-inow*$('ul li ').等式(0).width()" px "；乌尔。动画({ ' left ' : leng })；})函数autoplay(){ timer=setInterval(function(){ if(inow==$(' ul Li ')).length/2){ oul.css('left '，' 0px ')；inow=1；} else { inow}控制台。日志(inow)；var leng=-inow*$('ul li ').等式(0).width()" px "；乌尔。动画({ ' left ' : leng })；},2000);} autoplay()；/script/html希望这篇文章能帮到大家，喜欢技术交流的可以关注我，一起交流前端技术。感谢大家对我们的支持。