Home > Article > Web Front-end > Native JS written and compatible with IE6, 7, and 8 browsers for seamless automatic carousel (with button switching)
Native JS written and compatible with IE6, 7, and 8 browsers for seamless automatic carousel (with button switching)
- 青灯夜游forward
- 2018-10-11 17:35:482082browse
This article introduces native JS writing to be compatible with IE6, 7, and 8 browsers for seamless automatic carousel (with button switching). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
The project requirements page is compatible with IE6, 7, 8 and other browsers. We may encounter this carousel effect. The carousel section requires: infinite loop, automatic carousel and Manual switching function, each time scrolling a small grid, there are many such plug-ins on the Internet, such as: swiper, etc.!
But many of them are incompatible with low-level browsers such as IE6, 7, and 8. I have no choice but to write a similar carousel plug-in myself
Without further ado, let’s go directly to the code :
<!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)" class="prev" style="left:0px;">←</a>
<a href="javascript:void(0)" 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>
I hope this article can help everyone. If you like technical exchanges, you can follow me and exchange front-end technologies together.
Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit JavaScript Video Tutorial!
The above is the detailed content of Native JS written and compatible with IE6, 7, and 8 browsers for seamless automatic carousel (with button switching). For more information, please follow other related articles on the PHP Chinese website!