javascript - 定位事件幻灯片并添加 css 类

Question

我在视口(viewport)中使用带有 3 个元素的 bx slider ，我需要它有一个用于事件列表元素的 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

Answer 1

关于 bxslider 的问题并不多。我对你的问题做了很多研究并找到了解决方案，但我心中也有一些疑问。让我解释一下

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

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

1. 附上<ul>在 <div> 里面.
2. 对 CSS 做了一些改动.
3. 更改了 Jquery 中的主要部分.

HTML 和 CSS 的变化可以忽略不计，因此我只会在此处粘贴 Jquery。如需完整更改并查看实际解决方案，请查看此 fiddle 。

Working Solution.

Solution with Black & White Effect

$(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