Detaillierte Erläuterung des Implementierungsprinzips der Javascript-Fähigkeiten von js image carousel effect-js-Tutorial-php.cn

Detaillierte Erläuterung des Implementierungsprinzips der Javascript-Fähigkeiten von js image carousel effect

WBOY

Freigeben： 2016-05-16 15:25:11

Original

1413 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt das Implementierungsprinzip des js-Bildkarusselleffekts und wird als Referenz für alle freigegeben. Der spezifische Inhalt ist wie folgt

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

Nach dem Login kopieren

Hier ist das Prinzip

Zuerst wird die Funktion init() verwendet, um das Bildarray und den Wert des Bildes zu initialisieren. In diesem Beispiel wird setSrc() hauptsächlich zum Festlegen des src-Attributwerts des Bildes verwendet, um so einen Bildwechsel zu erreichen Das Bildkarussell verwendet einen Timer. Es zeigt an, wann es kommt! setInterval('play()',500) bedeutet, dass die Funktion play() alle 0,5 Sekunden aufgerufen wird!

Das Obige ist der Code für den js-Bildkarusselleffekt und eine kurze Einführung in das Prinzip der Realisierung des js-Bildkarusselleffekts. Ich hoffe, es kann jedem helfen, das Gelernte wirklich anzuwenden.