简体   繁体   中英

a set of images with a slide show - javascript

I would like to make a slide show for several images on the website while I encounter a problem when trying to copy the script or create a new function under a different name to light the next image on the page. Then you can not see either both photos on the page or you can see only one. I'm new to JS, I just want to do some pictures under me so that every image changes to another every 2 seconds, I need it for a website.

Regards

Here is orignal code: https://jsfiddle.net/bradtraversy/74owmd01/

My problem 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" />

please update your code.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM