溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關使用JavaScript怎么實現輪播停留效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
一、思路
1.輪播停留與無線滾動十分類似，都是利用屬性及變量控制移動實現輪播；
2.不同的是輪播停留需要添加過渡屬性搭配定時器即可實現輪播停留效果；
二、步驟
1.寫基本結構樣式
需在末尾多添加一張與第一張相同的圖片，消除切換時的抖動；
2.添加輪播停留事件 有了之前的基礎，直接添加索引圈默認事件到輪播停留事件內；
注意：當輪播到最后一張時，需要消除掉過渡，這里使用setTimeout定時器，卡最后一張圖片輪播完不延時，直接跳轉到第一張，由于第一張和最后一張一樣，所以會形成視覺盲區，看起來是連續輪播效果；
//輪播停留方法
function move() {
box.className = "box anmint";
circle[count].style.backgroundColor = "";
count++;
box.style.marginLeft = (-800 * count) + "px";
//最后一張走完之后，執行一次定時器不循環，卡過渡時間，消除切換
setTimeout(function () {
if (count >= 6) {
count = 0;
box.className = "box";
//marginLeft=0之前去除過渡屬性
box.style.marginLeft = "0px";
}
circle[count].style.backgroundColor = "red";
}, 500);
}3.添加進入索引圈事件
這和淡入淡出進入索引圈事件基本一致，不同的是這里不用調用輪播停留事件，直接利用當前index來索引使圖片跟隨變換；注意最后要標記count=this.index值，令再次執行默認行為時是緊跟著當前顯示圖片向后執行默認行為；
//進入索引圈事件
for(var j=0;j<circle.length;j++){
circle[j].index=j;
circle[j].onmouseenter=function(){
for(var k=0;k<circle.length;k++){
circle[k].style.backgroundColor="";
}
this.style.backgroundColor="red";
//圖片跟隨移動
box.className="box anmint";
box.style.marginLeft=(-800*this.index)+"px";
count=this.index;
}
}4.完善鼠標進入離開代碼
效果圖：
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS輪播停留效果</title>
<style>
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}
.block{
width: 800px;
height: 400px;
margin: 80px auto;
position: relative;
border: 1px solid red;
overflow: hidden;
}
.box{
width: 5600px;
height: 400px;
float: left;
}
.anmint{
transition: all 0.5s ease-in-out;
}
img{
width: 800px;
height: 400px;
float: left;
}
.cir{
width: 150px;
height: 20px;
z-index: 7;
position: absolute;
bottom: 10px;
left: 320px;
}
.circle{
width: 10px;
height: 10px;
border: 2px solid grey;
border-radius: 50%;
float: left;
margin: 0 5px;
}
</style>
<script>
window.onload=function(){
var box=document.getElementsByClassName("box")[0];
var count=0;
//索引圈事件
var circle=document.getElementsByClassName("circle");
circle[0].style.backgroundColor="red";
var time=setInterval(function(){
move();
},2000);
//鼠標進入事件
var block=document.getElementsByClassName("block")[0];
block.onmouseenter=function(){
clearInterval(time);
};
//鼠標離開事件
block.onmouseleave=function(){
time=setInterval(function(){
move();
},2000);
};
//進入索引圈事件
for(var j=0;j<circle.length;j++){
circle[j].index=j;
circle[j].onmouseenter=function(){
for(var k=0;k<circle.length;k++){
circle[k].style.backgroundColor="";
}
this.style.backgroundColor="red";
//圖片跟隨移動
box.className="box anmint";
box.style.marginLeft=(-800*this.index)+"px";
count=this.index;
}
}
//輪播停留方法
function move() {
box.className = "box anmint";
circle[count].style.backgroundColor = "";
count++;
box.style.marginLeft = (-800 * count) + "px";
//最后一張走完之后，執行一次定時器不循環，卡過渡時間，消除切換
setTimeout(function () {
if (count >= 6) {
count = 0;
box.className = "box";
//marginLeft=0之前去除過渡屬性
box.style.marginLeft = "0px";
}
circle[count].style.backgroundColor = "red";
}, 500);
}
}
</script>
</head>
<body>
<div class="block">
<div class="box">
<img class="imgg" src="./image/box1.jpg">
<img class="imgg" src="./image/box2.jpg">
<img class="imgg" src="./image/box3.jpg">
<img class="imgg" src="./image/box4.jpg">
<img class="imgg" src="./image/box5.jpg">
<img class="imgg" src="./image/box6.jpg">
<img class="imgg" src="./image/box1.jpg">
</div>
<div class="cir">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</body>
</html>看完上述內容，你們對使用JavaScript怎么實現輪播停留效果有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
