如何在HTML中每15秒更改一次图像

时间:2015-10-24 05:03:55

标签: html

我的HTML页面中有一个图像,我希望它每15秒更换一个不同的图像。

<img src="img/img 1.jpg" alt="image">

在我的本地文件夹img中,我有两张img 1.jpgimg 2.jpg的图片。如何在15秒后将img 1.jpg更改为img 2.jpg

4 个答案:

答案 0 :(得分:3)

试一试:

$(document).ready(function(){

    var img = 0;

    var slides = new Array();

    while (img < 5) {

        img++;

        // put your image src in sequence

        var src = 'assets/images/earth/Sequence' + img + '.jpg';

        slides.push(src);

    }

    var index = 0,timer = 0;

    showNextSlide();

    timer = setInterval(showNextSlide, 15000);

    function showNextSlide() {

        if (index >= slides.length) {

            index = 0;

        }

        document.getElementById('earth').src = slides[index++];
    }

});

答案 1 :(得分:3)

试试这个(纯JS)

&#13;
&#13;
var myArray = ['img1', 'img2', 'img3', 'img4', 'img5', 'img6']

var count = 0;
setInterval(function() {
  //use this below line if you want random images
  //var rand = myArray[Math.floor(Math.random() * myArray.length)];

  if (count >= myArray.length) count = 0; // if it is last image then show the first image.
  // use this below line if you want images in order.
  var rand = myArray[count];
  document.getElementById('img').src = rand;
  document.getElementById('img').alt = rand; // use 'alt' to display the image name if image is not found
  count++;
}, 1000); // 1000 = 1 second
&#13;
<img src="img/img 1.jpg" alt="image" id='img' />
&#13;
&#13;
&#13;

答案 2 :(得分:1)

要做到这一点,您需要一些Javascript来更改图像。这里有一个流行网站的链接,可以帮助您使用Javascript,HTML,CSS等等。您要特别注意的是此页面上的setInterval()函数:http://www.w3schools.com/js/js_timing.asp

如果您根本不了解Javascript,那么开始学习也不是一个好地方!如果您只需要它,那么您根本不需要任何Javascript。

答案 3 :(得分:0)

  1. 首先在页面中包含jQuery库。

  2. 然后使用此脚本:

    $(document).ready(function() {
        setInterval(function(){
            _path = $('img').attr('src');
            _img_id = _path.replace('img/img', '');
            _img_id = _img_id.replace('.jpg', '');
    
            _img_id++;
    
            if (_img_id == 3) {
                _img_id = 1;
            };
    
            $('img').attr('src', 'img/img' + _img_id + '.jpg');
        }, 15000);
    });