Im folgenden Artikel erfahren Sie, wie Sie den Karussell-Aufenthaltseffekt von JavaScript implementieren, der dem drahtlosen Scrollen sehr ähnlich ist. Interessierte Freunde, werfen wir einen Blick darauf
1. Ideen
1. Der Karussellaufenthalt ist dem drahtlosen Scrollen sehr ähnlich, beide verwenden Attribute und Variablen Steuern Sie die Bewegung, um das Karussell zu erreichen.
2. Der Unterschied besteht darin, dass der Karussellaufenthalt Übergangsattribute und Timer hinzufügen muss
1. Schreiben Sie den Grundstrukturstil
Sie müssen am Ende ein weiteres Bild hinzufügen Um das Umschalten zu verhindern, fügen Sie das Karussell-Aufenthaltsereignis direkt hinzu Hinweis: Wenn das Karussell das letzte Bild erreicht, muss der setTimeout-Timer eliminiert werden. Es erfolgt keine Verzögerung, nachdem das letzte Bild der Karte gedreht wurde, und es wird direkt zum ersten Bild gesprungen. Da das erste Bild mit dem letzten Bild identisch ist, entsteht ein visueller blinder Fleck, der wie ein kontinuierlicher Karusselleffekt aussieht
//轮播停留方法
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. Fügen Sie das Ereignis des Ein- und Ausblendens des Indexkreises hinzu
Der Unterschied besteht darin, dass das Karussell nicht aufgerufen werden muss Bleiben Sie hier, und der aktuelle Index wird direkt verwendet, um das Bild zu indizieren, um der Transformation zu folgen. Beachten Sie, dass der
-Wert am Ende markiert werden muss, damit das Standardverhalten nach dem aktuellen erneut ausgeführt wird angezeigtes Bild;//进入索引圈事件
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. Verbessern Sie den Ein- und Ausstiegscode der Maus
count=this.index Rendering:
<!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>
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonInformationen zur Implementierung des JavaScript-Karussell-Stay-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
