詳解js圖片輪播效果實(shí)現(xiàn)原理
更新時(shí)間：2015年12月17日 12:02:51 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了js圖片輪播效果實(shí)現(xiàn)原理，幫助大家更好地實(shí)現(xiàn)圖片輪播效果，真正理解圖片輪播原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例講述了js圖片輪播效果實(shí)現(xiàn)原理，分享給大家供大家參考，具體內(nèi)容如下
<!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;
//設(shè)置圖片src的屬性，實(shí)現(xiàn)圖片的切換
image.src = images[i].src;
}
function pre(){
if (current <= 0){
alert('已經(jīng)是第一張了');
}else{
current--;
setSrc(current);
}
}
function next(){
if (current >= 5){
alert('已經(jīng)是最后一張了');
}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()函數(shù)用于初始化images數(shù)組和image的值，本例中主要是利用setSrc()設(shè)置圖片的src屬性值，這樣就達(dá)到了圖片的切換，圖片的輪播是使用定時(shí)器來時(shí)顯的！setInterval('play()',500)的意思是每0.5s調(diào)用一次play()函數(shù)！
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是js圖片輪播效果代碼，以及實(shí)現(xiàn)js圖片輪播效果的原理簡(jiǎn)介，希望能夠幫助大家，真正的做到學(xué)以致用。
相關(guān)文章
Javascript之高級(jí)數(shù)組API的使用實(shí)例
今天小編就為大家分享一篇關(guān)于Javascript之高級(jí)數(shù)組API的使用實(shí)例，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-03-03
在本篇文章里小編給大家分享了關(guān)于js取小數(shù)點(diǎn)后兩位四種方法和實(shí)例代碼，需要的朋友們學(xué)習(xí)下。2019-01-01
這篇文章主要介紹了JavaScript節(jié)流和防抖函數(shù)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下
2020-08-08 
js與jQuery實(shí)現(xiàn)獲取table中的數(shù)據(jù)并拼成json字符串操作示例
這篇文章主要介紹了js與jQuery實(shí)現(xiàn)獲取table中的數(shù)據(jù)并拼成json字符串操作,涉及javascript與jQuery針對(duì)HTML頁面table表格數(shù)據(jù)獲取、遍歷及json字符串拼接相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07 
這篇文章主要為大家介紹了JavaScript中好用的解構(gòu)用法操作示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05 
JavaScript設(shè)計(jì)模式之中介者模式詳解
當(dāng)對(duì)象之間進(jìn)行多對(duì)多引用時(shí)，進(jìn)行開發(fā)，維護(hù)，閱讀時(shí)將變得特別痛苦。在這些對(duì)象之間添加中間者，使它們都只與中介者，當(dāng)中介者處理完一個(gè)對(duì)象的請(qǐng)求后，將結(jié)果通知于其他對(duì)象
2022-08-08 
uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能
這篇文章主要給大家介紹了關(guān)于uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能的相關(guān)資料,在相應(yīng)的頁面中完成對(duì)消息的處理,如果有新消息,則在tabBar頁面中顯示紅點(diǎn)提醒用戶,需要的朋友可以參考下
2023-08-08 
js控制輸入框獲得和失去焦點(diǎn)時(shí)狀態(tài)顯示的方法
這篇文章主要介紹了js控制輸入框獲得和失去焦點(diǎn)時(shí)狀態(tài)顯示的方法,可實(shí)現(xiàn)判斷輸入框的焦點(diǎn)狀態(tài)設(shè)置不同樣式的功能,是非常實(shí)用的技巧,需要的朋友可以參考下
2015-01-01 
關(guān)于base64編碼和解碼的js工具函數(shù)
這篇文章主要介紹了關(guān)于base64編碼和解碼的js工具函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02