具有next和prev函數的圖庫的JavaScript數組

Question

 var spanishAdventure = new Array(); spanishAdventure[0] = new Image(); spanishAdventure[0].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756508_1743696655674610_7179458580676129491_o.jpg?_nc_cat=0&oh=f16a2edf4ee735e66b6dab095b7fb43c&oe=5B6B32B3'; spanishAdventure[1] = new Image(); spanishAdventure[1].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26758659_1743696569007952_4447096103197624856_o.jpg?_nc_cat=0&oh=a7f015a6709fa9a26f06b07fe9782999&oe=5B6A180E'; spanishAdventure[2] = new Image(); spanishAdventure[2].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678421_1743695449008064_7298258449829506874_o.jpg?_nc_cat=0&oh=d8fb71ad599a0a630f4d118c1d8be6ca&oe=5B6E0AFD'; spanishAdventure[3] = new Image(); spanishAdventure[3].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678110_1743696009008008_4042393389305650172_o.jpg?_nc_cat=0&oh=7d6afafd399c4a2d5d8f0747d59d8353&oe=5B73557C'; spanishAdventure[4] = new Image(); spanishAdventure[4].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756324_1743697449007864_8430059194945119796_o.jpg?_nc_cat=0&oh=5c93856d22087dbf550fc98dfd7a79ce&oe=5B5FBF15'; spanishAdventure[5] = new Image(); spanishAdventure[5].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678350_1743697612341181_2805503461338827658_o.jpg?_nc_cat=0&oh=1e6d3b0c44b783742de688cedacccc20&oe=5B6E31BF'; spanishAdventure[6] = new Image(); spanishAdventure[6].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26841396_1743696739007935_7256143030060966136_o.jpg?_nc_cat=0&oh=d0b9cbe4f3920af54083ea12d2d19b40&oe=5B63A5E7'; var imageCount = 0; var totalImage = spanishAdventure.length -1; //array length starting from 0 var img = document.getElementById('mySlides'); //HTML img element which image will be displayed function imagePrev() { imgCount-- ; img.src =spanishAdventure[imageCount].src; if (imageCount < 0) { img.src = spanishAdventure[totalImage].src; break; } } function imageNext() { imgCount++ ; img.src =spanishAdventure[imageCount].src; if (imageCount > totalImage) { img.src = spanishAdventure[0].src; break; } } 

嗨，大家好，

我目前正在嘗試使用Javascript圖像數組和函數創建圖像庫，這些圖像將被調用以在原始HTML文件（未顯示）的圖像元素中創建圖像庫。 您是否發現下一個和上一個函數的js語法和代碼有什么問題，因為在html文件中調用時它們似乎不起作用。 我是一個新手，所以一些很有啟發性的指針將是fab。

mySlides是HTML img元素的ID。

干杯，

利亞姆

Answer 1

1. 正如@Titus所說，將imageCount更改為imgCount，反之亦然
2. 刪除break; 來自imagePrev和imageNext 。 它沒有做任何有用的事情。
3. 構建邏輯以將imageCount（或imgCount）保持在圖像數組的范圍內。
4. 您不需要實例化圖像來存儲源URL。 網址只是文本，因此可以將它們直接放入數組中，例如spanishAdventure = ['urlText1', 'urlText2', ...]

    var spanishAdventure = new Array(); spanishAdventure[0] = new Image(); spanishAdventure[0].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756508_1743696655674610_7179458580676129491_o.jpg?_nc_cat=0&oh=f16a2edf4ee735e66b6dab095b7fb43c&oe=5B6B32B3'; spanishAdventure[1] = new Image(); spanishAdventure[1].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26758659_1743696569007952_4447096103197624856_o.jpg?_nc_cat=0&oh=a7f015a6709fa9a26f06b07fe9782999&oe=5B6A180E'; spanishAdventure[2] = new Image(); spanishAdventure[2].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678421_1743695449008064_7298258449829506874_o.jpg?_nc_cat=0&oh=d8fb71ad599a0a630f4d118c1d8be6ca&oe=5B6E0AFD'; spanishAdventure[3] = new Image(); spanishAdventure[3].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678110_1743696009008008_4042393389305650172_o.jpg?_nc_cat=0&oh=7d6afafd399c4a2d5d8f0747d59d8353&oe=5B73557C'; spanishAdventure[4] = new Image(); spanishAdventure[4].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756324_1743697449007864_8430059194945119796_o.jpg?_nc_cat=0&oh=5c93856d22087dbf550fc98dfd7a79ce&oe=5B5FBF15'; spanishAdventure[5] = new Image(); spanishAdventure[5].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678350_1743697612341181_2805503461338827658_o.jpg?_nc_cat=0&oh=1e6d3b0c44b783742de688cedacccc20&oe=5B6E31BF'; spanishAdventure[6] = new Image(); spanishAdventure[6].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26841396_1743696739007935_7256143030060966136_o.jpg?_nc_cat=0&oh=d0b9cbe4f3920af54083ea12d2d19b40&oe=5B63A5E7'; var imageCount = 0; var totalImage = spanishAdventure.length -1; //array length starting from 0 var img = document.getElementById('mySlides'); //HTML img element which image will be displayed function imagePrev() { imageCount > 0 ? imageCount-- : imageCount = 6; img.src =spanishAdventure[imageCount].src; } function imageNext() { imageCount < 6 ? imageCount++ : imageCount = 0; img.src =spanishAdventure[imageCount].src; } 

    <img id="mySlides" /> <button onClick="imagePrev()">Prev</button> <button onClick="imageNext()">Next</button>