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

How to change the background of a sites body element to correspond with a slideshow?

本文关键字：幻灯片 相对 背景 网站 何更改 正文 元素      更新时间：2023-09-26

我是一个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 中呢？

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>
相关文章：