具有next和prev函数的图库的JavaScript数组

Question

＆＃13;

＆＃13;

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;
}
}

＆＃13;

＆＃13;

＆＃13;

嗨，大家好，

我目前正在尝试使用Javascript图像数组和函数来创建图像库，这些函数将被调用以在我的原始HTML文件（未显示）中的图像元素中创建图库。您是否看到js语法和下一个和上一个函数的代码有任何问题，因为它们在html文件中调用时似乎不起作用。我是一个新手，所以一些有启发性的指针将成为辉煌。

mySlides是HTML img元素的ID。

干杯，

利亚姆

Answer 1

1. 正如@Titus所说，将imageCount更改为imgCount，反之亦然
2. 从break;和imagePrev移除imageNext。它没有做任何有用的事情。
3. 构建逻辑以使imageCount（或imgCount）保持在图像数组的范围内。
4. 您无需实例化图像来存储源网址。网址只是文字，因此可以将它们直接放入数组中，例如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>