0

我在视口中使用带有 3 个项目的 bx 滑块，我需要它有一个用于活动列表项（在本例中为中间子项）的 css 类，但它不起作用。

这是 HTML 和 javascript：

        <ul class="bxslider" id="slider1">
               <li><img src="img/img-a.png" />

              </li>
              <li><img src="img/img-b.png" />

              </li>
              <li><img src="img/img-c.png" />

              </li>

        </ul>


<script type="text/javascript">
    $(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
<script type="text/javascript">
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
    $('#slider1 li').removeClass('active-slide');   
    $('#slider1>li').eq(currentSlideHtmlObject + 1).addClass('active-slide')
//     $('#sddf').html('<p class="check">Slide index ' + currentSlide + ' of ' + totalSlides + ' total slides has completed.');
}

和CSS：

#slider1 li{ 
   opacity:0.5;
   width:290px;
}


#slider1 .active-slide{
  opacity:1;
}

编辑： JSFIDDLE

4

1 回答 1

3

关于 bxslider 的 SO 问题并不多。我对您的问题进行了大量研究并找到了解决方案，但我也有一些疑问。让我解释

  1. 网络上很少有 bxslider 的资源或演示。
  2. 网站本身列出了一些演示，但没有提供任何源代码或适当的教程。
  3. 我得到的解决方案使用了与网站上规定的不同的回调。有趣的是，网站上的回调方法对我不起作用。

好的，这是我所做的更改。

  1. 附在<ul>里面一个<div>。
  2. 对CSS.
  3. 更改了Jquery.

HTML 和 CSS 中的更改可以忽略不计，因此我只会在此处粘贴 Jquery。有关完整更改并查看实际解决方案，请查看此小提琴。

工作解决方案。

具有黑白效果的解决方案

$(document).ready(function () {
    $('#slider').bxSlider({
        auto: true,
        pause: 2000,
        autoHover: true,
        controls: false,
        displaySlideQty: 3,
        moveSlideQty: 1,
        onAfterSlide: function (currentSlide, totalSlides, currentSlideHtmlObject) {
            var $middleSlide = currentSlide + 2;
            $('#slider li').css({
                opacity: 0.2
            });
            $('#slider li:eq(' + $middleSlide + ')').animate({
                opacity: 1
            }, 100);
        }
    });

});

现在您可以看到我所做的主要更改是我没有向 li 添加任何类，而是直接opacity通过 jquery 直接更改。

另外，如果您看到，我正在使用的回调是'onAfterSlide'。' onSlideAfter '回调不适合我。相反，我尝试了“onAfterSlide ”，这很有效。

编辑：我对这个问题进行了更多检查。原来我引用的 bxslider 脚本文件是较旧的 3.0 版本，因此回调是不同的。最新版本是 4.1.1，网站上提到的回调适用于此版本。

这有点令人困惑，网站上没有太多文档来澄清这一点。这是 bxslider 较新版本的外部链接。

http://bxslider.com/lib/jquery.bxslider.min.js

于 2013-08-21T12:15:13.610 回答