Question

我想在网站上为几个图像制作幻灯片，同时我在尝试复制脚本或使用其他名称创建新功能时遇到问题，以点亮页面上的下一个图像。然后，您无法在页面上看到这两张照片，也无法只看到一张照片。我是JS的新手，我只想在我下面做一些照片，这样每个图像每2秒换一次，我需要一个网站。

此致

这是orignal代码： https://jsfiddle.net/bradtraversy/74owmd01/

我的问题JS：

var i = 0;          // Start Point
var images = [];    // Images Array
var time = 3000;    // Time Between Switch

// Image List
images[0] = "http://lorempixel.com/400/200/animals";
images[1] = "http://lorempixel.com/400/200/sports";
images[2] = "http://lorempixel.com/400/200/food";
images[3] = "http://lorempixel.com/400/200/people";

// Change Image
function changeImg(){
    document.slide_1.src = images[i];

    // Check If Index Is Under Max
    if(i < images.length - 1){
      // Add 1 to Index
      i++; 
    } else { 
        // Reset Back To O
        i = 0;
    }

  function changeImg_2(){
    document.slide_2.src = images[i];

    // Check If Index Is Under Max
    if(i < images.length - 1){
      // Add 1 to Index
      i++; 
    } else { 
        // Reset Back To O
        i = 0;
    }


    // Run function every x seconds
    setTimeout("changeImg()", time);
  setTimeout("changeImg_2()", time);
}

// Run function when page loads
window.onload=changeImg;

HTML：

<img name="slide_1" width="400" height="200" />
<img name="slide_2" width="400" height="200" />

Answer 1

请更新您的代码。

var i = 0;          // Start Point
var images = [];    // Images Array
var time = 5000;    // Time Between Switch

// Image List
images[0] = "http://lorempixel.com/400/200/animals";
images[1] = "http://lorempixel.com/400/200/sports";
images[2] = "http://lorempixel.com/400/200/food";
images[3] = "http://lorempixel.com/400/200/people";

// Change Image
function changeImg(){
document.slide.src = images[i];
  i++;
  if(i>=images.length)
    i=0;

}
$(document).ready(function(){
setInterval(changeImg, time);
});

一组幻灯片放映的图像 - javascript

1 个答案: