Comment implémenter le défilement d'images avec JavaScript

Méthode JavaScript pour implémenter le défilement des images : [<script>var timer;var speed=10;var box=document.getElementById("box");var boxin=document.getEl...]. </script>

L'environnement d'exploitation de cet article : système windows10, javascript 1.8.5, ordinateur thinkpad t480.

Jetons d'abord un coup d'œil au principe d'obtention de l'effet de défilement d'image :

La boîte noire est la zone où l'image défilante est finalement affichée, et la boîte verte est son sous-conteneur, et sa largeur est plus grand que la boîte extérieure noire, afin que la boîte noire puisse être définie. Le scrollLeft de la boîte implémente le défilement de l'image. La boîte bleue la plus intérieure est utilisée pour envelopper toutes les images défilées, tandis que le contenu de la boîte violette sera le même que celui de la boîte bleue à l'avenir pour permettre un défilement transparent des images. Utilisez le minuteur JS pour modifier la valeur de l'attribut scrollLeft de la boîte noire à intervalles réguliers pour faire défiler l'image vers la gauche. En même temps, déterminez la valeur de scrollLeft si sa valeur atteint le côté le plus à droite du conteneur de la boîte noire. , cela signifie que la boîte bleue La boîte noire a défilé vers la gauche et la boîte violette est juste à l'intérieur de la boîte noire. À ce stade, vous devez définir la valeur scrollLeft de la boîte noire sur 0 et recommencer.

Code d'implémentation spécifique :

code html :

<!\-\- 最外层盒子 --\> 
<div id="box"> 
	<div id="boxin"> 
		<div id="neirong"> 
			<img src="Images/C_2.jpg" alt=""> 
			<img src="Images/C_3.jpg" alt=""> 
			<img src="Images/C_4.jpg" alt=""> 
			<img src="Images/C_5.jpg" alt=""> 
			<img src="Images/C_6.jpg" alt=""> 
		</div> 
		<div id="neirong2"></div> 
	</div> 
</div>

code css :

	*{
		margin: 0; 
		padding: 0; 
	} 
	#box{ 
		height: 100px; 
		width: 500px; 
		overflow: hidden; 
	} 
	#boxin{ 
		width: 1064px; 
		height: 100px; 
	}
    #neirong{
        float: left;
    }
    #neirong2{
        float: left;
    }
    img{
        width: 100px;
        height: 100px;
    }
</style>

code js :

<script>
        var timer;
        var speed=10;
        var box=document.getElementById("box");
        var boxin=document.getElementById("boxin");
        var neirong=document.getElementById("neirong");
        var neirong2=document.getElementById("neirong2");
        neirong2.innerHTML=neirong.innerHTML;
 
        function move(){
            if(neirong2.scrollWidth-box.scrollLeft<=0){
                box.scrollLeft=0;
            }else{
                box.scrollLeft++;
            }            
        }
        box.onmouseover=function(){
            clearInterval(timer);
        }
        box.onmouseout=function(){
            timer=setInterval(move,speed);
        }
        timer=setInterval(move,speed);
    </script>

Apprentissage recommandé : tutoriel vidéo javascript

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!