溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了原生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輪播特效匯總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
