您好,登錄后才能下訂單哦!
小編給大家分享一下JS實(shí)現(xiàn)圖片切換特效的方法,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
具體內(nèi)容如下
知識(shí)點(diǎn):
1.window.onload網(wǎng)頁全部加載完后再執(zhí)行
2.獲取元素 設(shè)置屬性
3.臨界情況判斷
運(yùn)行效果:
點(diǎn)擊上一張下一章切換圖片
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #box{ width: 1200px; margin: 0 auto; } </style> <body> <div id="box"> <img id="icon" src="images/阿魯1.gif" alt=""> <p></p> <button id="prep">上一張</button> <button id="next">下一張</button> </div> <script> window.onload = function (ev) { // 1. 獲取標(biāo)簽 var prep = document.getElementById('prep'); var next = document.getElementById('next'); var icon = document.getElementById('icon'); // 2. 點(diǎn)擊 var currentIndex = 1, minIndex=1, maxIndex=10; prep.onclick = function (ev1) { if (currentIndex === minIndex){ currentIndex = maxIndex; }else{ currentIndex--; } icon.setAttribute('src','images/阿魯'+ currentIndex +'.gif'); }; next.onclick = function (ev1) { if (currentIndex === maxIndex){ currentIndex = minIndex; }else { currentIndex++; } icon.setAttribute('src','images/阿魯'+ currentIndex +'.gif'); } } </script> </body> </html>
看完了這篇文章,相信你對(duì)“JS實(shí)現(xiàn)圖片切換特效的方法”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。