Maison > Article > interface Web > Comment obtenir l'effet d'animation du changement d'image en javascript (code)

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

不言original: 2018-08-23 11:26:445189parcourir

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>

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

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

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

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

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>

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!

JavaScript class JS this ul li

Déclaration：

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

Article précédent：Que signifie la pré-interprétation de js ? Une brève analyse de la signification de la pré-interprétation en jsArticle suivant：Que signifie la pré-interprétation de js ? Une brève analyse de la signification de la pré-interprétation en js

Articles Liés

Voir plus