So implementieren Sie einen Bildwechsel-Animationseffekt in Javascript (Code)-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

So implementieren Sie einen Bildwechsel-Animationseffekt in Javascript (Code)

不言

Aug 23, 2018 am 11:26 AM

图片切换

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(&#39;img&#39;)[0];
			var oSpan = op.getElementsByTagName(&#39;span&#39;)[0];
			var oP = op.getElementsByTagName(&#39;p&#39;)[0];
			var oUl = op.getElementsByTagName(&#39;ul&#39;)[0];
			
			var arrSrc = [&#39;img/1.jpeg&#39;,&#39;img/2.jpg&#39;,&#39;img/3.jpg&#39;,&#39;img/4.jpg&#39;,&#39;img/5.jpg&#39;];
			var arrText = [&#39;图片描述：第一张&#39;,&#39;图片描述：第二张&#39;,&#39;图片描述：第三张&#39;,&#39;图片描述：第四张&#39;,&#39;图片描述：第五张&#39;];
			
			//一般有数组就需要一个值
			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 += &#39;<li></li>&#39;;
			}
			
		}
	</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(&#39;li&#39;);

//切换图片
			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 = &#39;active&#39;;

//在点击事件中
//循环将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 = &#39;&#39;;
					oldLi = id;
					this.className = &#39;active&#39;;

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(&#39;img&#39;)[0];
            var oSpan = oDiv.getElementsByTagName(&#39;span&#39;)[0];
            var oP = oDiv.getElementsByTagName(&#39;p&#39;)[0];
            var oUl = oDiv.getElementsByTagName(&#39;ul&#39;)[0];
            var oLi = oUl.getElementsByTagName(&#39;li&#39;);
            
            var arrSrc = [&#39;img/1.jpeg&#39;,&#39;img/2.jpg&#39;,&#39;img/3.jpg&#39;,&#39;img/4.jpg&#39;,&#39;img/5.jpg&#39;];
            var arrText = [&#39;图片描述：第一张&#39;,&#39;图片描述：第二张&#39;,&#39;图片描述：第三张&#39;,&#39;图片描述：第四张&#39;,&#39;图片描述：第五张&#39;];
            
            //一般有数组就需要一个值
            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 += &#39;<li></li>&#39;;
            }
            oLi[oldLi].className = &#39;active&#39;;
            
            
            //切换图片
            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 = &#39;&#39;;
                    oldLi = id;
                    this.className = &#39;active&#39;;
                }
            }
            
        }
    </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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat -Befehle und wie man sie benutzt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7519

CakePHP-Tutorial

1378

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Wie kann in JavaScript ein nahtloser Links-Rechts-Schiebeeffekt von Bildern erzielt werden? Oct 19, 2023 am 08:56 AM

Wie kann man mit JavaScript einen nahtlosen Wechseleffekt von Bildern nach links und rechts erzielen? Mit der Entwicklung des Internets werden Bilder im Webdesign häufig als wichtige Elemente der Seite verwendet. Der Wechseleffekt von Bildern spielt eine wichtige Rolle für die Schönheit und Interaktivität der Seite. In diesem Artikel werden wir anhand konkreter Codebeispiele untersuchen, wie Sie mit JavaScript einen nahtlosen Links-Rechts-Schiebeeffekt von Bildern erzielen können. Um den Effekt des nahtlosen Verschiebens von Bildern nach links und rechts zu erzielen, müssen Sie zunächst Folgendes tun: Erstellen Sie einen Bildcontainer und verwenden Sie ihn

Methoden und Techniken zum Erzielen von Bildkarusselleffekten durch reines CSS Oct 18, 2023 am 08:27 AM

Methoden und Techniken zur Erzielung von Bildkarusselleffekten durch reines CSS Im modernen Webdesign werden Bildkarusselleffekte häufig verwendet, um mehrere Bilder oder Anzeigen nacheinander anzuzeigen. Es gibt viele Möglichkeiten, einen Bildkarusselleffekt zu erzielen. Eine der häufigsten Methoden ist die Verwendung von CSS-Animationen. In diesem Artikel werden Methoden und Techniken zum Erzielen von Bildkarusselleffekten durch reines CSS vorgestellt und spezifische Codebeispiele bereitgestellt. 1. HTML-Struktur Zunächst müssen die Bildelemente für das Karussell in HTML vorbereitet werden. Hier ist ein einfaches Beispiel für eine HTML-Struktur: &l

So verwenden Sie HTML, CSS und jQuery, um einen responsiven Bildwechseleffekt zu erstellen Oct 24, 2023 am 08:01 AM

Das Erstellen responsiver Bildwechseleffekte ist eine der häufigsten Aufgaben in der Frontend-Entwicklung. In diesem Artikel verwenden wir HTML, CSS und jQuery, um diesen Effekt zu erzielen. Nachfolgend finden Sie detaillierte Schritte und spezifische Codebeispiele. HTML-Struktur Zunächst müssen wir die für den Bildwechseleffekt erforderliche HTML-Struktur erstellen. Mit dem folgenden Codebeispiel können Sie eine einfache HTML-Struktur erstellen. <divclass="slider-container">

Wie kann man mit Vue Bildwechsel und Karusselleffekte erzielen? Aug 18, 2023 pm 04:57 PM

Wie kann man mit Vue Bildwechsel und Karusselleffekte erzielen? Vue ist ein JavaScript-Framework zum Erstellen von Benutzeroberflächen, das eine elegante und effiziente Möglichkeit bietet, Daten und Interaktionslogik in Webanwendungen zu verwalten. Eine der vielen großartigen Funktionen von Vue ist, dass es problemlos Bildwechsel und Karusselleffekte bewältigen kann. In diesem Artikel stellen wir vor, wie Sie mit Vue diese Effekte erzielen. Zunächst müssen wir einige grundlegende HTML-Strukturen und -Stile für die Anzeige von Bildern vorbereiten. Wir können <i verwenden

Wie kann ich mit JavaScript den Farbverlaufseffekt beim Bildwechsel erzielen? Oct 21, 2023 am 09:33 AM

Wie kann ich mit JavaScript den Farbverlaufseffekt beim Bildwechsel erzielen? Mit der Entwicklung des Internets legt das Website-Design immer mehr Wert auf das Benutzererlebnis. Der Bildwechsel ist einer der häufigsten interaktiven Effekte auf Websites, der die Aufmerksamkeit der Benutzer besser erregen kann. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript den Farbverlaufseffekt beim Bildwechsel erzielen, und es werden spezifische Codebeispiele bereitgestellt. Bevor wir beginnen, müssen wir einige Bildressourcen vorbereiten. Angenommen, wir haben drei Bilder, nämlich „image1.jpg“, „

Wie kann man mit JavaScript nahtlose Links- und Rechts-Schiebeeffekte von Bildern erzielen und gleichzeitig Zoom- und Fade-Animationen hinzufügen? Oct 25, 2023 am 09:39 AM

Wie kann man mit JavaScript nahtlose Links- und Rechts-Schiebeeffekte von Bildern erzielen und gleichzeitig Zoom- und Fade-Animationen hinzufügen? Bei der Website-Entwicklung ist der Gleitwechseleffekt von Bildern eine sehr häufige Anforderung. Hier stellen wir vor, wie man mit JavaScript einen nahtlosen Links- und Rechtswechseleffekt erzielt und gleichzeitig Zoom- und Fade-Animationen hinzufügt. In diesem Artikel finden Sie detaillierte Codebeispiele, damit Sie diesen Effekt problemlos erzielen können. Zuerst müssen wir einen Container in HTML vorbereiten, um Bilder zu platzieren, und die Container festlegen

So erzielen Sie mit Layui einen Bildwechsel-Karusselleffekt Oct 26, 2023 am 11:52 AM

Für die Verwendung von Layui zur Erzielung des Bildwechsel-Karusselleffekts ist ein spezifischer Codebeispieltitel erforderlich: Detaillierte Erläuterung der Verwendung von Layui zur Erzielung des Bildwechsel-Karusselleffekts Einführung: Im modernen Webdesign ist der Bildwechsel-Karusselleffekt zu einem der häufigsten Elemente geworden. Durch den Einsatz von Bildkarussells können Webseiten dynamischer und attraktiver gestaltet werden. In diesem Artikel wird Layui als Grundlage verwendet, um vorzustellen, wie der Bildwechsel-Karusselleffekt erzielt wird, und um spezifische Codebeispiele zu geben. 1. Einführung in die Layui-Karussellkomponente Layui ist ein klassisches Front-End-UI-Framework, das Folgendes umfasst:

So erzielen Sie mit Layui Bildwechsel- und Streckungseffekte Oct 25, 2023 am 08:13 AM

So erzielen Sie mit Layui Bildwechsel- und Streckungseffekte. Mit der rasanten Entwicklung der Web-Front-End-Technologie werden immer mehr Frameworks und Bibliotheken verwendet, um die Funktionen von Webseiten zu verschönern und zu verbessern. Unter diesen ist Layui ein sehr beliebtes Front-End-Framework, das umfangreiche UI-Komponenten und benutzerfreundliche Funktionserweiterungen bietet. In diesem Artikel wird erläutert, wie Sie mit Layui Bildwechsel- und Streckungseffekte erzielen, und es werden spezifische Codebeispiele aufgeführt. 1. Implementierung der HTML-Struktur für den Bildwechseleffekt Zuerst müssen wir einige HTML-Strukturen vorbereiten

See all articles