Question

我有这样的样式ID

#Myimage {
    width: 797px;
    height: 317px;
    background:url(images/templatemo_header_pizza.jpg) no-repeat;

我想每5秒更换一次图片我是JavaScript和jQuery的新手，但主要的想法是这样的

function ()
{
  ImageArray = LoadImage("Baseimage/*.jpg")

  while(true)
  {
     For(i in ImageArray)
      {
        Myimage.background:url = i;
        waitfor(5);
      }
  }
}

Answer 1

var imgArray = ["image1.jpg","image2.jpg"];
var counter = 0;
function changeImages() {
counter++;
$("#MyImage").css("background-image",'url(' +imgArray[counter]  + ')')
if(counter == 1) {
    counter = -1;
}

}
setInterval(changeImages,5000)

Answer 2

附加一个Jquery lib。在你的头部分中通过那个JQuery脚本：

  $(window).load(function() {          
  var i =0;
  var images = ['image2.png','image3.png','image1.png'];
  var image = $('#Myimage');
                //Initial Background image setup
  image.css('background-image', 'url(image1.png)');
                //Change image at regular intervals
  setInterval(function(){  
   image.fadeOut(1000, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   image.fadeIn(1000);
   });
   if(i == images.length)
    i = 0;
  }, 5000);           
 });

Answer 3

您可以使用Image检查图片是否存在：

$(function () {
    var base = "myImage_*.jpg", img, c = 0, ar = [], o = 0;
    function recurse () {
        img = new Image();
        img.src = base.replace('*', ++c);
        img.onload = function () {
            ar.push(img.src);
            recurse();
        }
        img.onerror = function () {
            c = -1;
            function r() {
                $("yourElement").css("background-image", "url("+ar[c++ >= ar.length ? (c=0) : c]+")");
                setTimeout(r, 2000); // 2000 is two seconds
            }
        }
    }
});

动态更改CSS样式中的图片

3 个答案: