Comment obtenir l'effet d'animation du changement d'image en javascript (code)-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Comment obtenir l'effet d'animation du changement d'image en javascript (code)

不言

Aug 23, 2018 am 11:26 AM

图片切换

Le contenu de cet article explique comment obtenir l'effet d'animation (code) du changement d'image en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Tout d'abord, le rendu ressemble à ceci. Cliquez sur le bouton à gauche pour changer d'image.

Cela semble assez simple, mais il reste encore plusieurs difficultés, je vais donc choisir ce cas et l'analyser attentivement.

Première étape : mise en page

<!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>

Copier après la connexion

Étape deux : données et initialisation

1) Rechercher les données

2) Initialiser la page

	<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>

Copier après la connexion

Étape 3 : Changer d'image. Jusqu'à présent, la fonction de changement d'image et d'affichage du texte a été réalisée, mais l'effet de l'ul à côté n'a pas encore été réalisé

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;
				}
			}

Copier après la connexion

Étape 4 : Implémenter l'ajout du style de classe de li.

Idée 1 :

Effacez tous les styles li et ajoutez-les à celui sur lequel vous cliquez.

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";

Copier après la connexion

Idée 2 :

Effacer la précédente, ajouter actuellement

pour définir une variable, oldLi stocke la valeur précédente du clic

La valeur par défaut est 0

Lorsque nous cliquons sur le suivant, celui qui sera 0 (par défaut) sera effacé.

Et enregistrez l'attribut personnalisé d'index du li actuellement cliqué oldLi = this.index;

Puis définissez l'attribut de classe du li actuel

oLi[oldLi].className = &#39;&#39;;
					oldLi = id;
					this.className = &#39;active&#39;;

Copier après la connexion

Terminé ;

Le code complet et les captures d'écran sont publiés ci-dessous

<!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>

Copier après la connexion

Recommandations associées :

Comment implémenter l'importation et l'exportation en javascript (avec code)

Effets d'animation des rendus carrousel js natifs (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Commandes de chat et comment les utiliser

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7519

Tutoriel CakePHP

1378

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Comment obtenir un effet de commutation coulissant fluide vers la gauche et la droite des images en JavaScript ? Oct 19, 2023 am 08:56 AM

Comment obtenir un effet de commutation coulissant fluide vers la gauche et la droite des images avec JavaScript ? Avec le développement d’Internet, les images sont souvent utilisées comme éléments importants de la page dans la conception Web. L'effet de changement des images a un impact important sur la beauté et l'interactivité de la page. Dans cet article, nous explorerons comment utiliser JavaScript pour obtenir un effet de commutation glissante fluide des images de gauche à droite, avec des exemples de code spécifiques joints. Pour obtenir l'effet d'une commutation fluide des images vers la gauche et la droite, vous devez d'abord procéder comme suit : Créer un conteneur d'images et utiliser

Méthodes et techniques pour obtenir des effets de carrousel d'images grâce à du CSS pur Oct 18, 2023 am 08:27 AM

Méthodes et techniques permettant d'obtenir des effets de carrousel d'images grâce à du CSS pur. Dans la conception Web moderne, les effets de carrousel d'images sont souvent utilisés pour afficher tour à tour plusieurs images ou publicités. Il existe de nombreuses façons d’obtenir un effet carrousel d’images, l’une des méthodes les plus courantes consiste à utiliser l’animation CSS. Cet article présentera les méthodes et techniques permettant d'obtenir des effets de carrousel d'images via du CSS pur et fournira des exemples de code spécifiques. 1. Structure HTML Tout d'abord, les éléments d'image du carrousel doivent être préparés en HTML. Voici un exemple simple de structure HTML : &l

Comment utiliser HTML, CSS et jQuery pour créer un effet de changement d'image réactif Oct 24, 2023 am 08:01 AM

La création d'effets de commutation d'image réactifs est l'une des tâches courantes du développement front-end. Dans cet article, nous utiliserons HTML, CSS et jQuery pour obtenir cet effet. Vous trouverez ci-dessous des étapes détaillées et des exemples de code spécifiques. Structure HTML Tout d'abord, nous devons créer la structure HTML requise pour l'effet de changement d'image. Vous pouvez utiliser l'exemple de code suivant pour créer une structure HTML simple. <divclass="slider-container">

Comment obtenir des effets de changement d'image et de carrousel via Vue ? Aug 18, 2023 pm 04:57 PM

Comment obtenir des effets de changement d'image et de carrousel via Vue ? Vue est un framework JavaScript permettant de créer des interfaces utilisateur qui offre un moyen élégant et efficace de gérer les données et la logique d'interaction dans les applications Web. L'une des nombreuses fonctionnalités intéressantes de Vue est qu'il peut facilement gérer le changement d'image et les effets de carrousel. Dans cet article, nous présenterons comment utiliser Vue pour obtenir ces effets. Tout d’abord, nous devons préparer quelques structures et styles HTML de base pour afficher les images. Nous pouvons utiliser <i

Comment utiliser JavaScript pour obtenir l'effet de dégradé du changement d'image ? Oct 21, 2023 am 09:33 AM

Comment utiliser JavaScript pour obtenir l'effet de dégradé du changement d'image ? Avec le développement d’Internet, la conception de sites Web accorde de plus en plus d’attention à l’expérience utilisateur. Le changement d'image est l'un des effets interactifs courants sur les sites Web. Le changement de dégradé des images peut mieux attirer l'attention des utilisateurs. Cet article explique comment utiliser JavaScript pour obtenir l'effet de dégradé du changement d'image et fournit des exemples de code spécifiques. Avant de commencer, nous devons préparer quelques ressources d’images. Supposons que nous ayons trois images, à savoir "image1.jpg", "

Comment obtenir des effets de commutation fluides des images vers la gauche et la droite avec JavaScript tout en ajoutant des animations de zoom et de fondu ? Oct 25, 2023 am 09:39 AM

Comment obtenir des effets de commutation fluides des images vers la gauche et la droite avec JavaScript tout en ajoutant des animations de zoom et de fondu ? Dans le développement de sites Web, l'effet de commutation coulissante des images est une exigence très courante. Nous allons présenter ici comment utiliser JavaScript pour obtenir un effet de commutation coulissante transparente vers la gauche et la droite, tout en ajoutant des animations de zoom et de fondu. Cet article fournira des exemples de code détaillés afin que vous puissiez facilement obtenir cet effet. Tout d'abord, nous devons préparer un conteneur en HTML pour placer les images et définir le

Comment utiliser Layui pour obtenir un effet carrousel de changement d'image Oct 26, 2023 am 11:52 AM

Comment utiliser Layui pour obtenir l'effet carrousel de changement d'image nécessite un titre d'exemple de code spécifique : Explication détaillée de l'utilisation de Layui pour obtenir l'effet carrousel de changement d'image Introduction : Dans la conception Web moderne, l'effet carrousel de changement d'image est devenu l'un des éléments communs. L'utilisation de carrousels d'images peut rendre les pages Web plus dynamiques et attrayantes. Cet article utilisera Layui comme base pour présenter comment obtenir l'effet carrousel de changement d'image et donnera des exemples de code spécifiques. 1. Introduction au composant carrousel Layui Layui est un framework d'interface utilisateur frontal classique, qui comprend

Comment utiliser Layui pour obtenir des effets de commutation et d'étirement d'image Oct 25, 2023 am 08:13 AM

Comment utiliser Layui pour obtenir des effets de commutation et d'étirement d'image. Ces dernières années, avec le développement rapide de la technologie frontale Web, de plus en plus de frameworks et de bibliothèques sont utilisés pour embellir et améliorer les fonctions des pages Web. Parmi eux, Layui est un framework frontal très populaire qui fournit des composants d'interface utilisateur riches et des extensions de fonctions faciles à utiliser. Cet article expliquera comment utiliser Layui pour obtenir des effets de commutation et d'étirement d'image, et donnera des exemples de code spécifiques. 1. Implémentation de la structure HTML de l'effet de changement d'image Tout d'abord, nous devons préparer quelques structures HTML pour

See all articles