Question

我在我的网站上使用jQuery.cycle.all.js作为我的图片。我想在图像改变/循环时改变图像的背景。很明显我想用id flash改变div的背景。如何做到这一点，任何想法？

这是jsfiddle：http://jsfiddle.net/nixiechen/3ndpfnys/

这是javascript：

$('.holder').cycle({
    timeout:2000        
});

/*pause-play buttons*/
$('.pause').on('click',function() {         
    $(this).removeClass('on');
    $('.play').addClass('on');
    $('.holder').cycle('pause'); 
});
$('.play').on('click',function() {          
    $(this).removeClass('on');      
    $('.pause').addClass('on');     
    $('.holder').cycle('resume'); 
});

HTML

<div id="flash">
    <div class="wrapper">
        <div class="btns">
            <a href="#" class="play" id="">&nbsp;</a>
            <a href="#" class="pause on" id="">&nbsp;</a>
        </div>
        <div class="holder">
            <img src="../images/01.jpg" alt="image"/>
            <img src="../images/02.jpg" alt="image"/>
            <img src="../images/03.jpg" alt="image"/>
            <img src="../images/04.jpg" alt="image"/>
        </div>
    </div>      
</div>

CSS

#flash { overflow: hidden; position: relative; height: 350px; background: #0a0f2c; }
#flash .wrapper { position: relative; height: 350px; z-index: 1; }
#flash .btns { position: absolute; overflow: hidden; top: 175px; left: 5px; z-index: 10000; }
#flash .btns a { float: left; width: 21px; height: 21px; margin: 0px 5px 0px 0px; text-decoration: none; }
#flash .btns a.play { display: block; background: url(../images/btn/btn_play_off.png) 0 0 no-repeat; }
#flash .btns a.play.on { background: url(../images/btn/btn_play_on.png) no-repeat; }
#flash .btns a.pause { background: url(../images/btn/btn_pause_off.png) 0 0 no-repeat; }
#flash .btns a.pause.on { background: url(../images/btn/btn_pause_on.png) no-repeat; }
#flash .holder { position: absolute; left: -150px; }
#flash .blue { background: #0a0f2c; }
#flash .brown { background: #3b1e16; }
#flash .black { background: #000; }

更新了jsfiddle链接

Answer 1

您可以将background-color添加到#flash中的cycle before function。

Jsfiddle

var color = 154235;
$('.holder').cycle({
    timeout: 2000,
    before: function (currSlideElement, nextSlideElement) {
        $('#flash').css({
            'background-color': '#' + color
        });
        color += 20;
    }
});

如何使用jquery循环更改图像持有者的背景颜色

1 个答案: