原生JS无缝滑动轮播图
编程学习 2021-07-04 15:01www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了原生JS实现淡出淡入轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了原生JS无缝滑动轮播图的具体实现代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul,div,img{
margin: 0;
padding: 0;
list-style: none;
vertical-align: top;
}
#banner{
width: 400px;
height: 300px;
margin:50px auto;
position: relative;
overflow: hidden;
}
#banner ul{
width: 400px;
position: absolute;
}
#banner li img{
width: 400px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 40px;
}
#dot{
height: 20px;
position: absolute;
left: calc(50% - 80px);
bottom: 20px;
}
#dot i{
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
float: left;
margin: 0 10px;
cursor: pointer;
}
#dot i.current{
background: rgb(161,1,34);
}
#pages{
height: 60px;
width:100%;
position: absolute;
top: calc(50% - 30px);
cursor: pointer;
}
#pages i{
width:30px;
height: 60px;
background: rgb(0,0,0);
font-size: 22px;
color: #fff;
text-align: center;
line-height: 60px;
opacity: 0.5;
font-style: normal;
position: absolute;
user-select: none;
}
#pages i.gt{
right:0;
top: 0;
font-size: 21px;
}
#pages i:hover{
opacity: 0.7;
}
</style>
</head>
<body>
<div id="banner">
<ul id="ul">
<li><img src="images2/imgs (1).jpg" alt=""></li>
<li><img src="images2/imgs (2).jpg" alt=""></li>
<li><img src="images2/imgs (3).jpg" alt=""></li>
<li><img src="images2/imgs (4).jpg" alt=""></li>
<li><img src="images2/imgs (5).jpg" alt=""></li>
<li><img src="images2/imgs (6).jpg" alt=""></li>
<li><img src="images2/imgs (7).jpg" alt=""></li>
<li><img src="images2/imgs (8).jpg" alt=""></li>
</ul>
<div id="dot">
</div>
<div id="pages">
<i class="lt">^</i>
<i class="gt">v</i>
</div>
</div>
<script src="tool.js"></script>
<script type="text/javascript">
var lis = $("li", $("#ul")),
liHeight = lis[0].offsetHeight,
len = lis.length;
c = 1; n = 2;
var first = lis[0].cloneNode(true),
last = lis[len - 1].cloneNode(true);
$("#ul").insertBefore(last, lis[0]);
$("#ul").appendChild(first);
var html = "";
for(var i = 0; i < len; i++)
html += "<i></i>";
len += 2;
$("#dot").innerHTML = html;
$("#ul").style.height = liHeight * len + "px";
$("#ul").style.top = -liHeight + "px";
var dots = $("i", $("#dot"));
dots[0].className = "current";
var tf = true;
function move(){
var _top = -n * liHeight;
animate($("#ul"), {top : _top}, 300, function(){
if(n >= len){
n = 2;
c = 1;
css($("#ul"), "top", -liHeight + "px");
}else if(n <= 1){
c = len - 2;
n = len - 1;
css($("#ul"), "top", c * -liHeight + "px");
}
});
var dotIndex = n - 1;
if(dotIndex === len - 2)
dotIndex = 0;
else if(dotIndex === -1)
dotIndex = len -3;
for(let i =0; i<dots.length; i ++)
dots[i].className = "";
dots[dotIndex].className = "current";
c = n;
n++;
}
var timer = setInterval(move, 3000);
$("#banner").onmouseover = function(){
clearInterval(timer);
}
$("#banner").onmouseout = function(){
timer = setInterval(move, 3000);
}
on($("#dot"), "mouseover", function(e){
e = e || event;
var src = e.target || e.srcElement;
if(src.nodeName === "I"){
var index = Array.from($("i", this)).indexOf(src);
n = index + 1;
move();
}
})
var timeout;
on($("#pages"), "click",function(e){
clearTimeout(timeout);
if(tf){
tf = false;
e = e || event;
var src = e.target || e.srcElement;
if(src.className === "gt"){
n = c - 1;
move();
}else if(src.className === "lt"){
move();
}
}
timeout = setTimeout(function(){
tf = true;
},400)
})
</script>
</body>
</html>
更多关于轮播图效果的专题，请点击下方链接查看学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。