Terdapat banyak cara untuk imej karusel Di sini kami memperkenalkan yang mudah: pelaksanaan tatasusunan js.
Mula-mula simpan laluan imej dalam tatasusunan, dan kemudian panggil fungsi setInterval untuk memutar imej dalam urutan
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type= "text/javascript" >
var curIndex = 0;
var timeInterval = 1000;
var arr = new Array();
arr[0] = "1.png" ;
arr[1] = "2.png" ;
arr[2] = "3.png" ;
arr[3] = "4.png" ;
arr[4] = "5.png" ;
setInterval(changeImg,timeInterval);
function changeImg() {
var obj = document.getElementById( "imge" );
if (curIndex == arr.length-1) {
curIndex = 0;
} else {
curIndex += 1;
}
obj.src = arr[curIndex];
}
</script>
|
Salin selepas log masuk
Contoh lengkapnya adalah seperti berikut
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>使用数组实现图片自动轮播</title>
<style type= "text/css" >
#main{
width: 700px;
height: 450px;
margin: 0 auto;
text-align: center;
}
</style>
<script type= "text/javascript" >
var curIndex = 0;
var timeInterval = 1000;
var arr = new Array();
arr[0] = "1.png" ;
arr[1] = "2.png" ;
arr[2] = "3.png" ;
arr[3] = "4.png" ;
arr[4] = "5.png" ;
setInterval(changeImg,timeInterval);
function changeImg() {
var obj = document.getElementById( "imge" );
if (curIndex == arr.length-1) {
curIndex = 0;
} else {
curIndex += 1;
}
obj.src = arr[curIndex];
}
</script>
</head>
<body>
<div id= "main" >
<h1>使用数组实现图片自动轮播</h1>
<img id = "imge" src = "1.png" alt= "picture" />
</div>
</body>
</html>
|
Salin selepas log masuk
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.