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

我一直在试图弄清楚这一点，并继续绕圈子。我有两个问题，我希望得到帮助。首先：我有一个 jquery 背景幻灯片显示在div 内。问题是，当背景淡出以引入新图像时，背景的 DIV 子级也是如此，我不希望这样。你可以在我的网站上看到它这里如何隔离父 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>

第二个问题是：我希望背景图像填满div 空间的 100%。我设法通过添加以下内容使其在 Chrome 中工作：

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

我不是

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

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

contentdiv必须放在centrediv之外。 contentdiv必须是绝对定位的叠加层。我使用轨道滑块进行图像滑动。

示例网页：

<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>

相关内容

最新更新

热门标签：