2

我是一个 javascript 新手，我想知道以下是否可行：

我有一个看起来像这样的 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 中？

4

3 回答 3

1

jQuery：

if($('.cycleLifestyle1').css('opacity') == 1){
    $('body').css('background', 'url:(image2.jpg)');
}else{
    $('body').css('background', 'url:(image1.jpg)');
}
于 2013-11-07T16:09:01.823 回答
0

这就是最终对我有用的方法。

<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>
于 2013-11-11T09:15:50.307 回答
0

关于我在这里看到的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”等！

希望我能帮上忙！

于 2013-11-07T16:47:48.323 回答