Explication détaillée du principe de mise en œuvre des compétences js Image Carousel effect

Explication détaillée du principe de mise en œuvre des compétences js Image Carousel effect_javascript

WBOY

Libérer： 2016-05-16 15:25:11

original

1427 Les gens l'ont consulté

L'exemple de cet article décrit le principe de mise en œuvre de l'effet carrousel d'images js et est partagé avec tout le monde pour votre référence. Le contenu spécifique est le suivant

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
 var timeID;
 var image;
 var current = 0;
 var images = new Array(5);
 function init(){
 for (var i=1;i<=5;i++){
 images[i] = new Image(450,550);
 images[i].src = "pictures/"+i+".jpg";
 }
 image = document.images[0];
 }
 function setSrc(i){
 current = i;
 //设置图片src的属性，实现图片的切换
 image.src = images[i].src;
 }
 function pre(){
 if (current <= 0){
 alert('已经是第一张了');
 }else{
 current--;
 setSrc(current);
 }
 }
 function next(){
 if (current >= 5){
 alert('已经是最后一张了');
 }else{
 current++;
 setSrc(current);
 }
 }
 function play(){
 if (current >= 5){
 current = 0;
 }
 setSrc(++current);
 }
</script>
<body onload="init()">
<input type="button" value="第一张" onclick="setSrc(1)">
<input type="button" value="上一张" onclick="pre()">
<input type="button" value="下一张" onclick="next()">
<input type="button" value="最后一张" onclick="setSrc(5)">
<input type="button" value="幻灯播放" onclick="timeID=setInterval('play()',500)">
<input type="button" value="停止播放" onclick="clearInterval(timeID)">
<div style="border:1px solid blue;width:450px; height:550px;" id="myPic">
 <img src="pictures/1.jpg" />
</div>
</body>
</html>

Copier après la connexion

Voici le principe

Tout d'abord, la fonction init() est utilisée pour initialiser le tableau images et la valeur de l'image. Dans cet exemple, setSrc() est principalement utilisée pour définir la valeur de l'attribut src de l'image, réalisant ainsi le changement d'image. Le carrousel d'images utilise une minuterie. Il montre quand il arrive ! setInterval('play()',500) signifie appeler la fonction play() toutes les 0,5 s !

Ce qui précède est le code de l'effet carrousel d'images js et une brève introduction au principe de réalisation de l'effet carrousel d'images js. J'espère que cela pourra aider tout le monde à vraiment appliquer ce qu'il a appris.