Question

我是一个javascript newb，我想知道以下是否可能：

我有一个javascript幻灯片，看起来像这样;

<script type="text/javascript" src="jquery.cycle.all.2.72v2.js.gz"></script> 
<script>
        $('#cycleLifestyle').cycle({
            fx: 'fade',
            timeout: 5000,
            pager: '#nav',
            pause: 'true'
        });
        $(window).load(function() {
            $('#cycleLifestyle').css('visibility', 'visible'); 
        });
</script>
<style type="text/css">
        #cycleLifestyle {visibility:hidden;}
        #r1 {background:url(131112_FW_HP_R1.jpg) repeat-x top center; width:1000px; height:396px;}
        #r2 {background:url(131112_FW_HP_R2.jpg) no-repeat top center; width:1000px; height:396px;}
</style>
<div id="cycleLifestyle" style="position: relative; width: 1000px;">
    <div class="cycleLifestyle1">
        <div id="r1">
        </div>
    </div>
    <div class="cycleLifestyle2">
        <div id="r2">
        </div>
    </div>
</div>

我想要发生的是在页面正文中添加一些样式，即背景图像，这取决于正在查看的旋转。

这就像

那样

if .cycleLifestyle1 opacity = 1 then
    use body{background:url(image.jpg)}
else
    use body{background:url(image2.jpg)}

但我怎么写这个并将它添加到现有的javascript中？

Answer 1

jQuery的：

if($('.cycleLifestyle1').css('opacity') == 1){
    $('body').css('background', 'url:(image2.jpg)');
}else{
    $('body').css('background', 'url:(image1.jpg)');
}

Answer 2

关于我所看到的here jQuery.cycle在每个动画后都有一个回调。

jQuery('#cycleLifestyle').cycle({ 
    fx: 'fade',
    timeout: 5000,
    pager: '#nav',
    pause: 'true',
    after:   onAfter
});

function onAfter() {
    // get current visible div by opacity
    var currentDiv = jQuery('div.cycleDiv[style*="opacity: 1"]');

    if (currentDiv.hasClass('class1')) {
        jQuery('body').css('background', 'url:(image1.jpg)');
    }
    else if (currentDiv.hasClass('class2')) {
        jQuery('body').css('background', 'url:(image2.jpg)');
    }
    // and so on... 
}

将所有div类更改为currentDiv并添加其他辅助类，如“class1”，“class2”等等！

希望我能帮忙！

Answer 3

这是最终对我有用的。

<script>

        function onAfter() {
            var currentVisible = $('.cycleDiv:visible').attr('class').split(' ')[0];
            $('body').removeClass().addClass(currentVisible).fadeIn();
        }   

        $(document).ready(function() {
            $('#cycleLifestyle').cycle({
                fx: 'fade',
                timeout: 5000,
                pager: '#nav',
                pause: 'true',
                after: onAfter
            });
        });
        $(window).load(function() {
            $('#cycleLifestyle').css('visibility', 'visible'); 
        });     

        </script>
<style type="text/css">
        .cycleLifestyle1 {
            background: url('images/image1.png') top center no-repeat #05387b;
        }
        .cycleLifestyle2 {
            background: url('images/image2.png') top center no-repeat #85152c;
        }
        body {
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
        }
        #r1 {background:url(image3.jpg) repeat-x top center; width:1000px; height:396px;}
        #r2 {background:url(image4.jpg) no-repeat top center; width:1000px; height:396px;}
        #cycleLifestyle {visibility:hidden;}
</style>
<div id="cycleLifestyle" style="position: relative; width: 1000px;">
    <div class="cycleLifestyle1">
        <div id="r1">
        </div>
    </div>
    <div class="cycleLifestyle2">
        <div id="r2">
        </div>
    </div>
</div>

如何更改网站正文元素的背景以与幻灯片对应？

3 个答案: