JavaScript實現(xiàn)圖片切換，主要用到setInterval()函數(shù)和clearInterval()函數(shù)，前者功能是開啟動畫，后者功能則為清除動畫（可理解為使動畫停止），為了使動畫停止，則需要定義全局變量作為標志，標志返回setInterval()函數(shù)的id，id作為clearInterval()函數(shù)的引用，目的是為了告訴clearInterval()函數(shù)動畫暫停的位置。下面是實現(xiàn)的代碼：
部分HTML代碼：第一個為左按鈕，是一張帶箭頭的透明圖片，點擊實現(xiàn)圖片右滑動，第二個為圖片展示區(qū)域，第三個是右按鈕，點擊實現(xiàn)圖片左滑動。
<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主要實現(xiàn)鼠標放在圖片上方，動畫暫停，移開圖片動畫開始，以及點擊左右按鈕，圖片的左右切換。
var photos = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];var count = 0; //記錄圖片張數(shù)var flag; //返回動畫idfunction callback() //實現(xiàn)圖片切換{ document.getElementById("photo").src = photos[count]; count++; if (count == photos.length) count = 0; } function change() //動畫開啟{ flag = setInterval(callback,2000); }function off() //onmouseover事件發(fā)生，動畫暫停{ clearInterval(flag);}function on() //onmouseout事件發(fā)生，動畫繼續(xù){ flag = setInterval(callback,2000); }function leftMove() //實現(xiàn)左滑動{ document.getElementById("photo").src = photos[count]; count++; if (count == photos.length) count = 0;}function rightMove() //實現(xiàn)右滑動{ count--; document.getElementById("photo").src = photos[count]; if (count <= 0) count = photos.length - 1;}整體實現(xiàn)代碼比較簡單，具體展示樣式則用到CSS，希望對初學者有所幫助！
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
