Javascript 如何更改网站主体元素的背景以与幻灯片相对应？

我是一名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>

但是我如何编写此代码并将其添加到现有的javascript中呢？

jQuery：

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

就我所看到的，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”等

---

希望我能帮忙

这是我最后的收获

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

函数onAfter（）{
var currentVisible=$（'.cycleDiv:visible'）.attr（'class'）.split（''）[0]；
$（'body'）.removeClass（）.addClass（currentVisible.fadeIn（）；
}   
$（文档）.ready（函数（）{
$（“#cycleLifestyle”）。循环({
外汇：“淡出”，
超时：5000，
寻呼机：“#导航”，
停顿：“对”，
之后
});
});
$（窗口）。加载（函数（）{
$（'#cycleLifestyle'）.css（'visibility'，'visible'）；
});     
.cycleLifestyle1{
背景：url（'images/image1.png'）顶部中间不重复#05387b；
}
.cycleLifestyle2{
背景：url（'images/image2.png'）顶部中间不重复#85152c；
}
身体{
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-ms转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
过渡：所有1都易于输入输出；
}
#r1{背景：url（image3.jpg）repeat-x上中；宽度：1000px；高度：396px；}
#r2{background:url（image4.jpg）不重复上止点；宽度：1000px；高度：396px；}
#cycleLifestyle{可见性：隐藏；}

干杯，伙计。我相信这可能在任何其他网站上都会起作用，但我的网站不会，我不知道为什么。我已经找到了另一个解决方案，稍后将发布。我还想把你的答案标记为有用，感谢你的帮助，但不幸的是，我还没有特权使用这个功能。干杯，伙计。我相信这可能在任何其他网站上都会起作用，但我的网站不会，我不知道为什么。我已经找到了另一个解决方案，稍后将发布。我还想把你的答案标记为有用，感谢你的帮助，但不幸的是，我还没有使用该功能的特权。

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