Penjelasan terperinci tentang prinsip pelaksanaan kemahiran js image carousel effect

Penjelasan terperinci tentang prinsip pelaksanaan kemahiran js image carousel effect_javascript

WBOY

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

asal

1381 orang telah melayarinya

Contoh dalam artikel ini menerangkan prinsip pelaksanaan kesan karusel imej js dan dikongsi dengan semua orang untuk rujukan anda. Kandungan khusus adalah seperti berikut

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

Salin selepas log masuk

Inilah prinsipnya

Pertama, fungsi init() digunakan untuk memulakan tatasusunan imej dan nilai imej Dalam contoh ini, setSrc() digunakan terutamanya untuk menetapkan nilai atribut src bagi imej, dengan itu mencapai penukaran imej karusel imej menggunakan pemasa Ia menunjukkan apabila ia datang! setInterval('play()',500) bermaksud memanggil fungsi play() setiap 0.5s!

Di atas ialah kod kesan karusel imej js dan pengenalan ringkas kepada prinsip merealisasikan kesan karusel imej js saya harap ia dapat membantu semua orang untuk benar-benar menggunakan apa yang telah mereka pelajari.