cari

Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang prinsip pelaksanaan kemahiran js image carousel effect_javascript

Penjelasan terperinci tentang prinsip pelaksanaan kemahiran js image carousel effect_javascript

WBOY
WBOYasal
2016-05-16 15:25:111416semak imbas

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>

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Contoh memanggil menu konteks dengan kemahiran js_javascriptArtikel seterusnya：Contoh memanggil menu konteks dengan kemahiran js_javascript

Artikel berkaitan

Lihat lagi