幻灯片的div的背景图片的jQuery + [英] slideshow for div's background image + jquery

问题描述

我在头一个大的div元素，还有许多文本内容，并在DIV一些箱子。和我有一个很大的IMG作为BG这个分区，现在我需要为这个div的背景幻灯片：/

I have a big div element at header and there are many text contents and some boxes in the div. and i have a big img as bg for this div, now i need to make a slideshow for this div's background :/

我怎样才能使一个div的背景图像幻灯片？

How can I make slideshow for a div's background image?

我研究了很多，但找不到任何东西：/

I researched a lot, but could not find anything :/

非常感谢！ AP preciate！

Thanks a lot! appreciate!

推荐答案

我也一直在寻找一个CSS背景元素幻灯片，感谢您的输入。我探索与setTimeout的方法您的解决方案，但是有巨大的麻烦与它（我是一个小白）。

I too was looking for a css background element slideshow, Thanks for your input. I explored your solution with the setTimeout method, however had massive troubles with it (I'm a noob).

我已经适应peirix的解决方案，以替代的setInterval以及与此上来;

I've adapted peirix's solution with a setInterval alternative and came up with this;

var bgArr = ["images/TopImage-01.jpg", "images/TopImage-02.jpg", "images/TopImage-03.jpg" ]; 
var i=0;

// Start the slide show
var interval = self.setInterval("swapBkgnd()", 5000)  

function swapBkgnd() {
 if (i>(bgArr.length-1) ) {
  i=0
  $("#header").css("background-image", "url("+bgArr[i]+")");
 }
 else {
  $("#header").css("background-image", "url("+bgArr[i]+")"); 
 } 
 i++;
};

现在我需要添加淡入效果和图像preloader，我会离开。很想知道是否有实现这个整洁的方式。

Now I need to add a fade effect and image preloader and I'll be away. Would be interested to know if there's a tidier way to achieve this.

这篇关于幻灯片的div的背景图片的jQuery +的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！