Question

我试图让用户点击图片库来更改图片时，背景图片也会发生变化。

所以我尝试使用data-slide-index将它们链接在一起。现在，我只是想改变背景颜色，而不是背景图像。任何帮助表示赞赏。感谢。

HTML：

<p id="back_to_story">
    <a href="story.html">Your Story</a>
</p>

<!-- MAIN CONTENT -->
<div class="container-fluid">

    <div class="row vertical-align">

        <div class="col-lg-3 col-md-3 col-sm-2 col-xs-12, left-col"> 
            <p><span id="prev"></span></p>      
        </div>

        <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12" class="content">
          <!--       GALLERY -->
                <ul class="bxslider">
                    <li data-slide-index="0"><img src="assets/slides/image1.jpg"></li>
                    <li data-slide-index="1"><img src="assets/slides/image2.jpg"></li>
                    <li data-slide-index="2"><img src="assets/slides/image3.jpg"></li>
                </ul>

        </div>

        <div class="col-lg-3 col-md-3 col-sm-2 col-xs-12, right-col">
            <p><span id="next"></span></p>
        </div>

    </div>

</div>

SCRIPT：

<script type="text/javascript">

    jQuery(document).ready(function(){
        jQuery('.bxslider').bxSlider({
            pager:false,
            slideWidth:900,

            touchEnabled: true,
            swipeThreshold: 50,
            oneToOneTouch: true,
            preventDefaultSwipeX: true,
            preventDefaultSwipeY: false,

            controls: true,
            nextSelector: '#next',
            prevSelector: '#prev',
            nextText: 'NEXT',
            prevText: 'PREV'
        });


            if (jQuery('li:visible').data('slide-index')==='0'){
                jQuery('body').css("background-color", "green");
            } else {
                if (jQuery('li:visible').data('slide-index')==='1'){
                jQuery('body').css("background-color", "red");              
            };

     });


</script>

Answer 1

我建议使用data方法和:visible伪选择器：

if (jQuery('li:visible').data('slide-index') === '0') {
    //enter code here
}

当图片库改变时背景改变

1 个答案: