我想用 Javascript 創建一個帶有兩個按鈕“下一個”和“上一個”的滑塊。下一個按鈕可以使用，但上一個按鈕不能使用。這是我的代碼：let myImage = document.getElementById('mainImage'); let images = ["./img/th01.jpg", "./img/th02.jpg", "./img/th03.jpg", "./img/th04.jpg", "./img/th05.jpg"]; let imageIndex = 1; function next(){ myImage.setAttribute('src', images[imageIndex]); imageIndex++; if (imageIndex >= images.length) { imageIndex = 0; } } function previous(){ myImage.setAttribute('src', images[imageIndex]); imageIndex--; if (imageIndex <= 0) { imageIndex = images[imageIndex]; } }<div id="wrapper"> <img src="./img/th01.jpg" id="mainImage"> <br> <br> <button onclick="previous()">Previous</button> <button onclick="next()">Next</button> </div>有什么幫助嗎？
1 回答
海綿寶寶撒
TA貢獻1809條經驗 獲得超8個贊
您的next按鈕也無法正常工作。這兩個函數的問題在于，您在更改后src更改了索引，因此新的索引src將反映最后一次imageIndex單擊按鈕之后的內容，而不是剛剛發生的單擊。（并且由于硬編碼為從 1 開始，因此第一次單擊始終會執行“下一步”按鈕應該執行的操作）imageIndex
初始化為0，并在設置之前imageIndex更改它。src
另外，不要使用內聯處理程序，它們有一個瘋狂的作用域鏈，需要全局污染，并且有引用轉義問題。改用addEventListener：
let myImage = document.getElementById('mainImage');
let images = ["./img/th01.jpg", "./img/th02.jpg", "./img/th03.jpg", "./img/th04.jpg", "./img/th05.jpg"];
let imageIndex = 0;
const [prev, next] = document.querySelectorAll('button');
next.addEventListener('click', () => {
? imageIndex++;
? if (imageIndex === images.length) {
? ? imageIndex = 0;
? }
? myImage.src = images[imageIndex];
});
prev.addEventListener('click', () => {
? imageIndex--;
? if (imageIndex === -1) {
? ? imageIndex = images.length - 1;
? }
? myImage.src = images[imageIndex];
});
<div id="wrapper">
? <img src="./img/th01.jpg" id="mainImage">
? <br>
? <br>
? <button>Previous</button>
? <button>Next</button>
</div>
- 1 回答
- 0 關注
- 150 瀏覽
添加回答
舉報
0/150
提交
取消