Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
169 views
in Technique[技术] by (71.8m points)

Javascript images slide

I am creating a website for my school project. I want to put some pictures in a slide show, but for some reason my code isnt working. Here is my code

   <div class="row">
     <div class="col-md-12">
       <h3 class = "Contains">
          <script type = "text/javascript">
            var image1= new image()
            image1.src=images/truck1.png

            var image2= new image()
            image2.src=images/truck4.png

            var image3= new image()
            image3.src=images/truck7.png

          </script>
          <img src="images/truck1.PNG" name = "slide" width ="400" height ="400">

          <script>
            var step =1;

            function slideit(){
              document.images.slide.src=eval("image"+step+".src");
              if (step<3)
                step++;
              else
                step=1;

              setTimeout("slideit()", 2500);
            }

            slideit()
          </script>
     </h3>
</div>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

A very basic and simple example of how you can step through an array

//Array of images
var Images = ['https://dummyimage.com/100x100/000/fff.jpg',
  'https://dummyimage.com/200x200/000/fff.jpg',
  'https://dummyimage.com/300x300/000/fff.jpg'
];
//Step counter
var step = 1;

function gallery() {
  //change image
  document.getElementById('Imgs').src = Images[step];
  //Or you can use - document.images.slide.src=Images[step];
  // is step more than the image array?
  if (step < Images.length - 1) {
    // No - add 1 for next image.
    step++;
  } else {
    // Yes - Start from the first image
    step = 0;
  }
}
//When the ready, set interval.
window.onload = setInterval(gallery, 2500);
<img id="Imgs" name="slide" src="https://dummyimage.com/100x100/000/fff.jpg" />

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...