0

私は一日中これを理解しようとしていて、ぐるぐる走り続けています。助けてもらいたいと思っていた問題が 2 つあります。最初: div 内に表示される jquery バックグラウンド スライドショーがあります。問題は、背景がフェードアウトして新しい画像が導入されると、背景が意図されていた 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>

2 番目の問題はこれです: 背景画像が div スペースの 100% を埋めるようにします。以下を追加することで、Chromeでこれを機能させることができました。

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

私は jquery の専門家ではないので、専門家ではありません。上記のコードが正しいかどうかもわかりませんが、他のブラウザーでは奇妙な効果が得られます。より大きな画像が表示され、直後に正しいサイズの画像が表示されます。既存のjqueryコードを使用して、これを行う方法はありますか?

どんな助けでも本当に感謝しています。私は自分が望む場所にとても近いです。

4

1 に答える 1

0

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>
于 2012-04-21T09:30:21.843 に答える