原生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>

更多关于轮播图效果的专题,请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

以上是 原生JS无缝滑动轮播图 的全部内容, 来源链接: utcz.com/z/328305.html

回到顶部