javascript - JQuery - 自动更改图像的功能

Question

我需要，背景上的一些图像（例如随机 5 - 8 个）会自动更改为另一张图像（例如 10 秒后，类似于示例链接但自动，而不是悬停）。

  $('.fader').hover(function() {
    $(this).find("img").fadeToggle();
  });

Answer 1

我做了一个JSFiddle DEMO .. 也许它可以帮助你。

这很简单，这就是我执行的功能setInterval

var $imgs = $(".fader").find("img"),
    i = 0;

function changeImage(){
    var next = (++i % $imgs.length);
    $($imgs.get(next - 1)).fadeOut(500);
    $($imgs.get(next)).fadeIn(500);
}
var interval = setInterval(changeImage, 2000);

希望有帮助..

Answer 2

您可以使用setInterval它经常运行一个功能，然后在其中有您的图像更改功能

//global variable
var bgImg = 1;

//runs every second
window.setInterval(function(){
    yourFunction();
}, 10000);

//changes background image
function   yourFunction () {
  ++bgImg;

  if(bgImg === 4){
    bgImg = 1;
  }

  if(bgImg === 1){
    $('#element').css("background-image","URL('imgs/image1.jpg')");
  }

  if(bgImg === 2){
    $('#element').css("background-image","URL('imgs/image3.jpg')");
  }

  if(bgImg === 3){
    $('#element').css("background-image","URL('imgs/image3.jpg')");
  }        
}

您总是可以添加更多的 jquery 来淡出图像或比普通开关更平滑的东西

Answer 3

这是你想要的吗？使用 BX 滑块。

http://jsfiddle.net/writetobhuwan/Xm2Be/393/

JS就是这么简单..

$(document).ready(function(){
  $('.bxslider').bxSlider();
});