Der Inhalt dieses Artikels befasst sich mit der Erzielung des Animationseffekts (Code) des Bildwechsels in JavaScript. Ich hoffe, dass er für Sie hilfreich ist.
Zunächst sieht das Rendering so aus: Klicken Sie auf die Schaltfläche links, um die Bilder zu wechseln.
Es scheint ganz einfach zu sein, aber es gibt immer noch einige Schwierigkeiten, deshalb werde ich diesen Fall herausgreifen und ihn sorgfältig analysieren.
Schritt eins: Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换器</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: RGB(123,113,104);
}
#pic{
width: 300px;
height: 400px;
position: relative;
margin: 50px auto;
}
#pic img{
width: 300px;
height: 400px;
}
#pic span,#pic p{
position: absolute;
width: 300px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgba(61,50,48,0.5);
}
#pic span{
top: 0px;
}
#pic p{
bottom: 0px;
}
#pic ul{
position: absolute;
top:0px;
left: 320px;
}
#pic li{
list-style: none;
width: 40px;
height: 40px;
background-color: #333;
margin-bottom:10px ;
}
#pic li.active{
background-color: #F2F2F2;
}
</style>
<body>
<p id="pic">
<img src="img/1.jpeg"/>
<span>- / -</span>
<p>图片描述正在加载中...</p>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
</body>
</html>Nach dem Login kopieren
Schritt zwei: Daten und Initialisierung
1) Finden Sie die Daten
2) Initialisieren Sie die Seite
<script type="text/javascript">
window.onload = function(){
var op = document.getElementById("pic");
var oImg = op.getElementsByTagName('img')[0];
var oSpan = op.getElementsByTagName('span')[0];
var oP = op.getElementsByTagName('p')[0];
var oUl = op.getElementsByTagName('ul')[0];
var arrSrc = ['img/1.jpeg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
var arrText = ['图片描述：第一张','图片描述：第二张','图片描述：第三张','图片描述：第四张','图片描述：第五张'];
//一般有数组就需要一个值
var num = 0;
//初始化
oSpan.innerHTML = num+1 +" / "+ arrSrc.length;
oImg.src = arrSrc[num];
oP.innerHTML = arrText[num];
for(var i=0;i<arrSrc.length;i++){
oUl.innerHTML += '<li></li>';
}
}
</script>Nach dem Login kopieren
Schritt 3: Bild wechseln und Text anzeigen wurde bisher implementiert, aber die Wirkung des ul daneben wurde noch nicht realisiert
var oLi = oUl.getElementsByTagName('li');
//切换图片
for(var i=0;i<arrSrc.length;i++){
//自定义属性，一一对应
oLi[i].index = i;
oLi[i].onclick = function(){
var id = this.index;
//通过自定义的属性设置对应的信息
oImg.src = arrSrc[id];
oP.innerHTML = arrText[id];
oSpan.innerHTML = id+1 +" / "+ arrSrc.length;
}
}Nach dem Login kopieren
Schritt 4: Implementieren Klassenstil der Li-Addition.
Idee 1:
Löschen Sie alle Li-Stile und fügen Sie sie zu dem hinzu, auf den Sie klicken.
var oldLi = 0;
//初始化
oLi[oldLi].className = 'active';
//在点击事件中
//循环将class清空
for(var j=0;j<arrSrc.length;j++){
oLi[j].className = "";
}
oLi[id].className = "active";Nach dem Login kopieren
Idee 2:
Vorheriges löschen, derzeit
hinzufügen, um eine Variable zu definieren, oldLi speichert den vorherigen Wert des Klicks
Standard ist 0
Wenn wir auf die nächste klicken, wird diejenige gelöscht, die 0 sein wird (Standard).
Und notieren Sie das benutzerdefinierte Indexattribut des aktuell angeklickten li oldLi = this.index;
Setzen Sie dann das Klassenattribut des aktuellen li ein
oLi[oldLi].className = '';
oldLi = id;
this.className = 'active';
Nach dem Login kopieren
Abgeschlossen;
Der vollständige Code und die Screenshots werden unten veröffentlicht
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换器</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: RGB(123,113,104);
}
#pic{
width: 300px;
height: 400px;
position: relative;
margin: 50px auto;
}
#pic img{
width: 300px;
height: 400px;
border-radius:10px;
}
#pic span,#pic p{
position: absolute;
width: 300px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgba(61,50,48,0.5);
}
#pic span{
top: 0px;
border-radius:10px 10px 0 0;
}
#pic p{
bottom: 0px;
border-radius: 0 0 10px 10px;
}
#pic ul{
position: absolute;
top:0px;
left: 320px;
}
#pic li{
list-style: none;
width: 40px;
height: 40px;
background-color: #333;
margin-bottom:10px ;
border-radius: 10px;
}
#pic li.active{
background-color: #F2F2F2;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("pic");
var oImg = oDiv.getElementsByTagName('img')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP = oDiv.getElementsByTagName('p')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var arrSrc = ['img/1.jpeg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
var arrText = ['图片描述：第一张','图片描述：第二张','图片描述：第三张','图片描述：第四张','图片描述：第五张'];
//一般有数组就需要一个值
var num = 0;
var oldLi = 0;
//初始化
oSpan.innerHTML = num+1 +" / "+ arrSrc.length;
oImg.src = arrSrc[num];
oP.innerHTML = arrText[num];
for(var i=0;i<arrSrc.length;i++){
oUl.innerHTML += '<li></li>';
}
oLi[oldLi].className = 'active';
//切换图片
for(var i=0;i<arrSrc.length;i++){
//自定义属性，一一对应
oLi[i].index = i;
oLi[i].onclick = function(){
var id = this.index;
//通过自定义的属性设置对应的信息
oImg.src = arrSrc[id];
oP.innerHTML = arrText[id];
oSpan.innerHTML = id+1 +" / "+ arrSrc.length;
oLi[oldLi].className = '';
oldLi = id;
this.className = 'active';
}
}
}
</script>
<body>
<div id="pic">
<img src="img/1.jpeg"/>
<span>- / -</span>
<p>图片描述正在加载中...</p>
<ul>
<!--<li class="active"></li>-->
</ul>
</div>
</body>
</html>Nach dem Login kopieren
Verwandte Empfehlungen:
So implementieren Sie Import und Export in Javascript (mit Code)
Animationseffekte nativer JS-Karussell-Renderings (mit Code)
Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Bildwechsel-Animationseffekt in Javascript (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
