簡(jiǎn)單實(shí)現(xiàn)JavaScript圖片切換效果
JavaScript實(shí)現(xiàn)圖片切換,主要用到setInterval()函數(shù)和clearInterval()函數(shù),前者功能是開啟動(dòng)畫,后者功能則為清除動(dòng)畫(可理解為使動(dòng)畫停止),為了使動(dòng)畫停止,則需要定義全局變量作為標(biāo)志,標(biāo)志返回setInterval()函數(shù)的id,id作為clearInterval()函數(shù)的引用,目的是為了告訴clearInterval()函數(shù)動(dòng)畫暫停的位置。下面是實(shí)現(xiàn)的代碼:
部分HTML代碼:第一個(gè)為左按鈕,是一張帶箭頭的透明圖片,點(diǎn)擊實(shí)現(xiàn)圖片右滑動(dòng),第二個(gè)為圖片展示區(qū)域,第三個(gè)是右按鈕,點(diǎn)擊實(shí)現(xiàn)圖片左滑動(dòng)。
<body onload="change()"> <div id="changePhotos"> <img src="images/left.png" id="leftimg" onclick="rightMove()"/> <img id="photo" src="images/4.jpg" onmouseover="off()" onmouseout="on()" /> <img src="images/right.png" id="rightimg" onclick="leftMove()"/> </div> </body>
JavaScript全部代碼:JS主要實(shí)現(xiàn)鼠標(biāo)放在圖片上方,動(dòng)畫暫停,移開圖片動(dòng)畫開始,以及點(diǎn)擊左右按鈕,圖片的左右切換。
var photos = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg']; var count = 0; //記錄圖片張數(shù) var flag; //返回動(dòng)畫id function callback() //實(shí)現(xiàn)圖片切換 { document.getElementById("photo").src = photos[count]; count++; if (count == photos.length) count = 0; } function change() //動(dòng)畫開啟 { flag = setInterval(callback,2000); } function off() //onmouseover事件發(fā)生,動(dòng)畫暫停 { clearInterval(flag); } function on() //onmouseout事件發(fā)生,動(dòng)畫繼續(xù) { flag = setInterval(callback,2000); } function leftMove() //實(shí)現(xiàn)左滑動(dòng) { document.getElementById("photo").src = photos[count]; count++; if (count == photos.length) count = 0; } function rightMove() //實(shí)現(xiàn)右滑動(dòng) { count--; document.getElementById("photo").src = photos[count]; if (count <= 0) count = photos.length - 1; }
整體實(shí)現(xiàn)代碼比較簡(jiǎn)單,具體展示樣式則用到CSS,希望對(duì)初學(xué)者有所幫助!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js下利用userData實(shí)現(xiàn)客戶端保存表單數(shù)據(jù)
對(duì)于多數(shù)網(wǎng)頁(yè)制作的朋友,實(shí)現(xiàn)在客戶端保存在網(wǎng)頁(yè)表單上的信息,比較多的是采用Cookie技術(shù)來實(shí)現(xiàn),這些功能例如:下拉列表框選擇的選項(xiàng),文本框輸入的數(shù)據(jù)等。2010-06-06在Layui中實(shí)現(xiàn)開關(guān)按鈕的效果實(shí)例
今天小編就為大家分享一篇在Layui中實(shí)現(xiàn)開關(guān)按鈕的效果實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09MUI 實(shí)現(xiàn)側(cè)滑菜單及其主體部分上下滑動(dòng)的方法
下面小編就為大家分享一篇MUI 實(shí)現(xiàn)側(cè)滑菜單及其主體部分上下滑動(dòng)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01JavaScript設(shè)計(jì)模式之單例模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之例模式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06Javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
這篇文章主要為大家介紹了Javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果,非常詳細(xì)的注釋代碼,文具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11