3秒后的下一张图像

时间:2015-12-04 21:16:08

标签: javascript html css

我有带有next / previus按钮的图片库,我希望在3秒后自动将图像更改为下一张图像。我该怎么做?这段代码用Javascript:

var ary=[
'images/image1.png',            
'images/image2.jpg',
'images/image3.jpg',
'images/image4.jpg',
'images/image4.jpg',
'images/image4.jpg'
];

function Slide(id,ary,nu){
 document.getElementById(id).src = ary[nu];
 Slide[id] = {nu: nu};  
}

function nextImage(id, ary, ud){
  var nu = (Slide[id]&&Slide[id].nu?Slide[id].nu:0) + ud;  
  Slide(id, ary, Math.min(Math.max(nu, 0), ary.length-1));
}

感谢您的每一个答案。

1 个答案:

答案 0 :(得分:3)

您可以执行以下操作 DEMO

<div class="image">
  <img src="http://placehold.it/350x150">
</div>

<强> JS

$(function () {
  count = 0;
  images = ["http://placehold.it/350x150/FF0000", "http://placehold.it/350x150/4A84EB", "http://placehold.it/350x150/45BAE4", "http://placehold.it/350x150"];

  setInterval(function () {
    count++;
    $(".image img").fadeOut(400, function () {
      var next = images[count % images.length];
      $(this).attr('src', next).fadeIn(400);
    });
  }, 3000);
});