這次帶給大家JS輪播停留效果實現步驟詳解，JS輪播停留效果實現的注意事項有哪些，下面就是實戰案例，一起來看一下。
一、思路
1.輪播停留與無線滾動十分類似，都是利用屬性及變數控制移動實現輪播；
2.不同的是輪播停留需要加入過渡屬性搭配定時器即可實現輪播停留效果；
二、步驟
##1.寫基本結構樣式
需要在最後多加一張與第一張相同的圖片，消除切換時的抖動；
//轮播停留方法
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;
}
}<!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>
<p class="block">
<p 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">
</p>
<p class="cir">
<p class="circle"></p>
<p class="circle"></p>
<p class="circle"></p>
<p class="circle"></p>
<p class="circle"></p>
<p class="circle"></p>
</p>
</p>
</body>
</html>以上是JS輪播停留效果實現步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
