js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果
寫一個(gè)圖片切換的小案例,鞏固一下setAttribute的用法。setAttribute()方法能夠給dom元素添加屬性并指定屬性值,如果屬性已經(jīng)存在則更改屬性值。
方法:將圖片放入數(shù)組中首先給img一個(gè)初始值,使用index存放當(dāng)前被點(diǎn)擊圖片的下標(biāo),當(dāng)再一次點(diǎn)擊時(shí),下標(biāo)+1賦值給數(shù)組下標(biāo),利用setAttribute()方法給img標(biāo)簽設(shè)置src屬性。上一張效果反之,代碼如下。
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="utf-8"> ?? ??? ?<title></title> ?? ?</head> ?? ?<style type="text/css"> ?? ??? ?img { ?? ??? ??? ?width: 400px; ?? ??? ??? ?height: 400px; ?? ??? ??? ?display: block; ?? ??? ?} ?? ?</style> ?? ?<body> ?? ??? ?<img src="../imgs/t11.jpg" alt="" id="img"> ?? ??? ?<button type="button" id="prev">上一張</button> ?? ??? ?<button type="button" id="next">下一張</button> ?? ?</body> ?? ?<script type="text/javascript"> ?? ??? ?var imgs = document.getElementById("img") ?? ??? ?var nextBtn = document.getElementById("next") ?? ??? ?var prevBtn = document.getElementById("prev") ?? ??? ?var imgArr = [ ?? ??? ??? ?"../imgs/t11.jpg", ?? ??? ??? ?"../imgs/doraemon.jpg", ?? ??? ??? ?"../imgs/peiqi.jpg", ?? ??? ??? ?"../imgs/qiang.jpg" ?? ??? ?] ?? ??? ?var index = 0; ?? ??? ?nextBtn.onclick = function() { ?? ??? ??? ?index++; ?? ??? ??? ?if (index > imgArr.length - 1) { ?? ??? ??? ??? ?index = 0 ?? ??? ??? ?} ?? ??? ??? ?imgs.setAttribute("src", imgArr[index]) ?? ??? ?} ?? ??? ?prevBtn.onclick = function() { ?? ??? ??? ?index-- ?? ??? ??? ?if (index < 0) { ?? ??? ??? ??? ?index = imgArr.length - 1 ?? ??? ??? ?} ?? ??? ??? ?imgs.setAttribute("src", imgArr[index]) ?? ??? ?} ?? ?</script> </html>
實(shí)現(xiàn)效果為當(dāng)點(diǎn)擊下一張圖片切換至數(shù)組中的下一張,點(diǎn)擊上一張切換至數(shù)組中的下一張
初始界面為
點(diǎn)擊下一張效果為
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript-解決mongoose數(shù)據(jù)查詢的異步操作
這篇文章主要介紹了javascript-解決mongoose數(shù)據(jù)查詢的異步操作,具有一定的參考價(jià)值,有興趣的可以了解一下。2016-12-12在一個(gè)瀏覽器里呈現(xiàn)所有瀏覽器測試結(jié)果的前端測試工具的思路
對前端工程師來說,跨瀏覽器的兼容性問題一直是最頭疼的,測試一個(gè)小小的東西,就要打開N個(gè)瀏覽器,然后比較來比較去,記錄個(gè)瀏覽器的數(shù)據(jù),比較不同,實(shí)在是麻煩.2010-03-03JS 自動(dòng)完成 AutoComplete(Ajax 查詢)
實(shí)現(xiàn)類似于百度或谷歌的搜索下拉列表的,就是打開百度往里輸入你要查詢的條件,只要你一輸入他就自動(dòng)彈出一個(gè)下拉列表框,并顯示相關(guān)所有搜索內(nèi)容2009-07-07Javascript實(shí)現(xiàn)的簡單右鍵菜單類
這篇文章主要介紹了Javascript實(shí)現(xiàn)的簡單右鍵菜單類,通過JavaScript自定義類實(shí)現(xiàn)右鍵菜單功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JavaScript?對象新增方法defineProperty與keys的使用說明
這篇文章主要介紹了JavaScript對象新增方法defineProperty與keys的使用說明,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-09-09JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10