詳解js圖片輪播效果實作原理_javascript技巧
- WBOY原創
- 2016-05-16 15:25:111415瀏覽
本文實例講述了js圖片輪播效果實現原理，分享給大家供大家參考，具體內容如下
<!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>
原理在這吶
首先init()函數用來初始化images數組和image的值，本例中主要是利用setSrc()設定圖片的src屬性值，這樣就達到了圖片的切換，圖片的輪播是使用定時器來時顯的！ setInterval('play()',500)的意思是每0.5s呼叫一次play()函數！
以上就是js圖片輪播效果程式碼，以及實現js圖片輪播效果的原理簡介，希望能夠幫助大家，真正的做到學以致用。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn