js實現(xiàn)圖片數(shù)組中圖片切換效果
更新時間：2022年07月21日 11:37:47 作者：藍胖胖。
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片數(shù)組中圖片切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
寫一個圖片切換的小案例，鞏固一下setAttribute的用法。setAttribute()方法能夠給dom元素添加屬性并指定屬性值，如果屬性已經(jīng)存在則更改屬性值。
方法：將圖片放入數(shù)組中首先給img一個初始值，使用index存放當前被點擊圖片的下標，當再一次點擊時，下標+1賦值給數(shù)組下標，利用setAttribute()方法給img標簽設(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>實現(xiàn)效果為當點擊下一張圖片切換至數(shù)組中的下一張，點擊上一張切換至數(shù)組中的下一張
初始界面為
點擊下一張效果為
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了ES6中Iterator與for..of..遍歷用法,結(jié)合實例形式分析了ES6中Iterator的概念、用法及for..of..遍歷的使用技巧,需要的朋友可以參考下2017-03-03
javascript-解決mongoose數(shù)據(jù)查詢的異步操作
這篇文章主要介紹了javascript-解決mongoose數(shù)據(jù)查詢的異步操作，具有一定的參考價值，有興趣的可以了解一下。2016-12-12
這篇文章主要介紹了JS中回調(diào)函數(shù)及用法，通過實例代碼給大家詳細介紹了什么是回調(diào)函數(shù)，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
這是我在給庫中添加事件的時候?qū)懙奶砑邮录姆椒ǎ∵@個方法實現(xiàn)了跨瀏覽器之間的方法！2009-02-02
在一個瀏覽器里呈現(xiàn)所有瀏覽器測試結(jié)果的前端測試工具的思路
對前端工程師來說,跨瀏覽器的兼容性問題一直是最頭疼的,測試一個小小的東西,就要打開N個瀏覽器,然后比較來比較去,記錄個瀏覽器的數(shù)據(jù),比較不同,實在是麻煩.2010-03-03
這篇文章主要為大家詳細介紹了微信小程序自定義彈出層效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
實現(xiàn)類似于百度或谷歌的搜索下拉列表的，就是打開百度往里輸入你要查詢的條件，只要你一輸入他就自動彈出一個下拉列表框，并顯示相關(guān)所有搜索內(nèi)容2009-07-07
這篇文章主要介紹了Javascript實現(xiàn)的簡單右鍵菜單類,通過JavaScript自定義類實現(xiàn)右鍵菜單功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
JavaScript?對象新增方法defineProperty與keys的使用說明
這篇文章主要介紹了JavaScript對象新增方法defineProperty與keys的使用說明,文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鼠標拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10