Bxslider在盒子里重复图像

时间:2014-03-18 11:49:13

标签: jquery html jquery-plugins bxslider

我正在创建一个脚本,以便用户可以使用bxslider更改网站的背景图片,它可以正常工作,但不是100%,当我点击图片时背景发生变化,但它会发生变化在其他图像中,所有缩略图都在该图像中变换。如果我删除div back_inicial它不会发生,但我需要该div使盒子相对定位。

jQuery('.bxslider').bxSlider({
                minSlides: 3,
                maxSlides: 4,
                slideWidth: 170,
                slideMargin: 10,
            });

             jQuery('.bxslider li a').on('click', function(e){
                    e.preventDefault();
                    jQuery('#siteCorpo img').attr('src', 'jQuery(this).attr('href') );
             });
        ");


<div id="siteCorpo">

    <img class="img-responsive" src="{PATH_IMG}/fundotopo.jpg">


    <div class = "back_inicial" >

    <ul class="bxslider">
        <li ><a href="{PATH_IMG}/imagem1.jpg"><img class="img-responsive" src="{PATH_IMG}/imagem1.jpg" /></a></li>

        <li ><a href="{PATH_IMG}/imagem2.jpg"><img  src="{PATH_IMG}/imagem2.jpg" /></a></li>
        <li ><a href="{PATH_IMG}/imagem1.jpg"><img src="{PATH_IMG}/imagem1.jpg" /></a></li>
        <li><a href="{PATH_IMG}/imagem3.jpg"><img src="{PATH_IMG}/imagem3.jpg" /></a></li>
        <li><a href="{PATH_IMG}/fundotopo.jpg"><img src="{PATH_IMG}/fundotopo.jpg" /></a></li>

    </ul>

</div>


</div>

1 个答案:

答案 0 :(得分:2)

有用吗?我为img设置了一个特殊课程

jQuery('.bxslider li a').on('click', function(e){
                        e.preventDefault();
                        jQuery('img.bgChange').attr('src', 'jQuery(this).attr('href') );
    });

<img class="img-responsive bgChange" src="{PATH_IMG}/fundotopo.jpg">