Question

我一直试图弄明白这一点，并继续在圈子里跑。我有两个问题，我希望得到帮助。 第一次：我在div中显示了一个jquery背景幻灯片。问题是，当背景淡出以引入新图像时，背景所针对的DIV的孩子也是如此，我不希望这样。你可以看到它at my website here我怎样才能隔离父DIV，这样孩子也不会淡出？以下是幻灯片演示的代码：

<script language="JavaScript" type="text/javascript">  
    $(document).ready(function(){    
        var imgArr = [ // relative paths of images  
            'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/1.jpg',  
            'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/2.jpg',  
            'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/3.jpg',  
            'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/4.jpg' 
        ];    

    var preloadArr = [];  
    var i;    

    /* preload images */ 

    for(i=0; i < imgArr.length; i++){  
        preloadArr[i] = new Image();  
        preloadArr[i].src = imgArr[i];  
    }    

    var currImg = 1;  
    var intID = setInterval(changeImg, 6000);    

    /* image rotator */ 

    function changeImg(){  
        $('#centerdiv').animate({opacity: 0}, 1000, function(){  
            $(this).css('background','url(' + 
                preloadArr[currImg++%preloadArr.length].src +') center fixed no-repeat');  
        }).animate({opacity: 1}, 1000);
        $('#centerdiv').css({'background-size': '100% 100%'}); }    
    }); 

</script>

以下是与该问题有关的CSS（我知道其中很多可能是多余的）：

 #centerdiv {
    width:100%;
    height: 642px;
    background-color: #333333;
    background-image:url('http://www.ind-mediagroup.com/wp-  content/themes/twentyeleven/indeximg/houston-night.jpg');
    background-repeat: no-repeat;/* i believe the next few lines are dealt with in the jquery code*/
    background-size: 100% 100%;
    background-position: center;
    background-attachment: fixed;

    top:0px;
    padding-top: 55px;
}

.contentdiv {
    width: 78%;
    height: 75%;
    margin: auto auto auto 140px; 
    background-image: url('http://www.ind-mediagroup.com/wp-   content/themes/twentyeleven/indeximg/whitetransbg.png');
    position: relative;
    z-index: 10;
}

以下是与此问题相关的HTML：

<div id="centerdiv">
    <div class="contentdiv">
        <div class="wrappercontent">
            <div id="contentname">
                <p class="contentTextHeader">+<?php the_title() ?></p>
            </div>

            <div id="content">

                <?php
                    if (have_posts()) :
                        while (have_posts()) :
                            the_post();
                            the_content();
                        endwhile;
                    endif;
                ?>

            </div>

            <div id="contentright">
                <?php echo apply_filters('the_content', get_post_meta($post->ID, 'page_image', true) ); ?>       
            </div>
        </div> 
    </div>
</div>

第二个问题是：我希望背景图片填充100％的div空间。我设法通过添加：

让这个在Chrome中运行

$('#centerdiv').css({'background-size': '100% 100%'});

我不是一个jquery专家，所以我到目前为止还不是专家，并且不确定前面的代码是否正确，但在其他浏览器中，它给我一个奇怪的效果。它将显示较大的图像，并在显示正确大小的图像后立即显示。使用现有的jquery代码，有没有办法做到这一点？

我非常感谢任何帮助。我非常接近我想要的地方。

Answer 1

contentdiv必须放在centrediv之外。 contentdiv必须绝对定位覆盖。我使用轨道滑块进行图像滑动。

示例html：

<style type="text/css">
    #centerdiv{
        border-radius: 3px;
    }
    #contentdiv{
        position: absolute;
        top: 20px;
        left:40px;
        z-index: 300;
    }
</style>

<body>

    <div id="centerdiv">
        <img src="http://www.lorempixum.com/898/270/animals" alt="" /> 
        <img src="http://www.lorempixum.com/898/270/city" alt="" /> 
        <img src="http://www.lorempixum.com/898/270/food" alt="" /> 
        <img src="http://www.lorempixum.com/898/270/sports" alt="" /> 
    </div>
    <div id="contentdiv">
            This is my text
    </div>
    <pre>Animals -> City -> Food -> Sports</pre>
    <script type="text/javascript">
        $(window).load(
            function(){
                $('#centerdiv').orbit({
            'timer': true,
            'advanceSpeed': 6000,
            'bullets' : false,
            'bulletThumbs': false, 
            });});
    </script>
</body>

如何使jquery背景幻灯片只影响父div？

1 个答案: