Question

我花了很多时间尝试创建bxSlider的变体，它将使用容器来保存访问滑块中主图像的缩略图，以便我可以使用“next”和“previous”为此容器设置动画使用js的按钮。它应该仅为标记为“class ='scrollable'”的div的内容设置动画，但它也会影响滑块的主图像，使其消失并且不允许在初始化后以任何其他方式访问它单击其中一个按钮。以下是js：

<script type="text/javascript">
$(document).ready(function () {
    $("#next").click(function () {
        $('.scrollable').animate({
            scrollLeft: '+=220'
        }, "slow");
    });
    $("#prev").click(function () {
       $('.scrollable').animate({
            scrollLeft: '-=220'
        }, "slow");
    });
});
</script>

位于bxSlider代码上方的标题中：

<script type="text/javascript">

$(document).ready(function(){    
$('.slides').bxSlider({
  auto: false,
  autoStart: false,
  autoHover: true,
  mode: 'fade',
  controls: true,
  captions: true,
  pause: 5000,
  speed: 500,
  pager: true,
        buildPager: null,
        pagerCustom: '#bx-pager',
});
  });
</script>

然后在我的html中，我的滑块看起来像这样：

<ul class="slides">
<li><img src="01.jpg" border="0" />
<div class="bx-caption">CAPTION</div></li>
<li><img src="02.jpg" border="0" />
<div class="bx-caption">CAPTION</div></li>
</ul>

<div id="bx-pager">

<div class="scrollable">
<div class="controller"><a href="#" id="prev">PREVIOUS</a><a href="#" id="next">NEXT</a> </div>             
<div class="scrollme">
<a data-slide-index="0" href=""><img src="01.jpg" /></a>
<a data-slide-index="1" href=""><img src="02.jpg" /></a>
</div>
</div>

</div>

在我看来，从技术上讲，没有什么应该是动画内部的.scrollable，但当你点击“next”或“prev”按钮时，里面的图像会消失。有谁知道为什么会发生这种情况或如何覆盖它？

触发js动画时，bxSlider主图像消失

0 个答案: