Question

我在使用包含Jquery的div的居中方面遇到了麻烦。它应该是所有其他内容背后的标题，但我不能在那里得到它。我尝试了z-index和职位变体，但没有一个有效。

有人可以告诉我我做错了吗？

这是我的代码：

HTML：

<div id="container">
<div id="mads"></div>
<div id="slideshow">
    <img src="image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="image2.jpg" alt="Slideshow Image 2" />
    <img src="image3.jpg" alt="Slideshow Image 3" />
    <img src="image4.jpg" alt="Slideshow Image 4" />
</div>

CSS：

#slideshow {
    height:350px;
    width:1100px;
    z-index:9;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

body{
    background-color:#000;
}

#container{
    width:1124px;
    height:768px;
    margin-left:auto;
    margin-right:auto;
}

#mads{
    width:1124px;
    height:768px;
    margin-left:auto;
    margin-right:auto;
    background-image:url(file:///schijfje/Users/502034/Desktop/mappen/Stage/03.%20Mads%20Wittermans/web.png);

    background-repeat:no-repeat;
    z-index:100;
}

.header{
    margin-left:auto;
    margin-right:auto;
    z-index:1;
    position:absolute;
}

JS：

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

修改

问题解决了：我给了包含jQuery的div和另一个在绝对位置和z-index之上的div。现在div正好位于彼此之后。

Answer 1

这是一个有效的版本 http://jsfiddle.net/marqs/cn8UJ/

代码有几个问题（或者我猜这些奇怪的解决方案是无意的）

1）标题应该是<header> - 标记，而不是div。你可以在div中使用脚本，但它通常没有多大意义。好吧，除非您只能通过CMS或其他方式将代码注入DOM中的特定部分。

2）您的代码只是定义了函数，从未调用过setInterval。你可能想做的是

$(document).ready(function() {
 // this code gets run when DOM is loaded
 setInterval(slideSwitch, 5000);
});

这会绑定在DOM准备就绪时触发的事件侦听器。这通常是您希望运行代码的时间。

包含jQuery的Div不会以另一个div为中心

1 个答案: