Javascript 使用jQuery旋转背景图像

我正在尝试使用jquery旋转div的背景图像。它工作正常，但当图像旋转时，div中的内容消失。我如何防止内容消失并使其始终存在：

代码：

---

小提琴

你可以这样做

一些内容

您可以使用

位置：绝对在图像上

我使用
position:absolute编辑了您的JSFIDLE

HTML：

<div id="slideit" style="width:700px;height:391px;">
    <div class="slideit-content">some content</div>
    <img class="img-rotate active" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image2.png" />
    <img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image3.png" />
    <img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png" />
</div>

.img-rotate {
    position: absolute;
    top: 0;
    left: 0;
    width: 700px;
    height: 391px;
    opacity: 0;
    z-index: 0;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

.img-rotate.active {
    opacity: 1;
}

.slideit-content {
    z-index: 10;
    position: relative;
}

jQuery(function($) {
    var i = 0, 
        image = $('#slideit'),
        images = image.find(".img-rotate"),
        images_count = images.length,
        next_image;

    setInterval(function(){
        i = (i+1) % images_count;
        next_image = images.eq(i);
        images.filter(".active").removeClass("active");
        next_image.addClass("active");
    }, 5000);            
});

JS：

<div id="slideit" style="width:700px;height:391px;">
    <div class="slideit-content">some content</div>
    <img class="img-rotate active" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image2.png" />
    <img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image3.png" />
    <img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png" />
</div>

.img-rotate {
    position: absolute;
    top: 0;
    left: 0;
    width: 700px;
    height: 391px;
    opacity: 0;
    z-index: 0;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

.img-rotate.active {
    opacity: 1;
}

.slideit-content {
    z-index: 10;
    position: relative;
}

jQuery(function($) {
    var i = 0, 
        image = $('#slideit'),
        images = image.find(".img-rotate"),
        images_count = images.length,
        next_image;

    setInterval(function(){
        i = (i+1) % images_count;
        next_image = images.eq(i);
        images.filter(".active").removeClass("active");
        next_image.addClass("active");
    }, 5000);            
});

在“main”
div
中需要两个
div
。第一个孩子有内容，第二个孩子有背景图像。在这里，您可以使用
position:absolute
设置内容，这将使您的内容不会消失。