无缝轮播滚动html模板,原生JS无缝滑动轮播图

本文实例为大家分享了原生JS无缝滑动轮播图的具体实现代码，供大家参考，具体内容如下

Document

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;

}

• 
• 
• 
• 
• 
• 
• 
• 

^

v

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 += "";

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[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)

})

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。