项目要求页面兼容IE6,7,8等浏览器，我们可能会遇到这个轮播效果，轮播板块要求：无限循环、自动轮播和手动切换功能，每一次滚动一小格，网上有很多这类插件，例如:swiper等！
但是很多都是不兼容IE6,7,8这些低级浏览器的，没有办法，只能自己写一个类似的轮播插件
废话不多说，直接上代码:
<!DOCTYPE html>
<html>
<head>
< charset="UTF-8">
< ></ >
< type="text/ " src="js/jquery-1.8.3-20180801.min.js"></ >
<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=" :void(0)" rel="external nofollow" rel="external nofollow" class="prev" style="left:0px;">←</a>
<a href=" :void(0)" rel="external nofollow" rel="external nofollow" class="next" style="right:0px;">→</a>
</div>
</body>
< type="text/ ">
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();
</ >
</html>
希望这篇文章能帮到大家，喜欢技术交流的可以关注我，一起交流前端技术。感谢大家对脚本之家的支持。
继续阅读与本文标签相同的文章
上一篇 :
第十三章：位图（四）
-
票据签收还用打开网银？你out了
2026-05-18栏目： 教程
-
内容端迎来新机遇，从韩国看5G内容端将如何重塑？
2026-05-18栏目： 教程
-
绑手指、蒙布也能行，OpenAI让机器人单手还原魔方
2026-05-18栏目： 教程
-
斩获三个“全国第一”，漳州有一家“隐形冠军”企业
2026-05-18栏目： 教程
-
经历8个月改造，岗顶百脑汇“转型回归”
2026-05-18栏目： 教程