以活动幻灯片为目标并添加css类

Target active slide and add css class

本文关键字：添加 css 目标 活动 幻灯片      更新时间：2023-09-26

我使用的bx滑块在视口中有3个项目，我需要它为活动列表项（在本例中为中间子项）提供一个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

SO上关于bxslider的问题不多。我对你的问题做了很多研究，找到了答案，但我也有一些疑问。让我来解释

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

好的，这是我做的改动。

  1. 将<ul>封装在<div>中
  2. 对CSS进行了少量更改
  3. 更改了Jquery中的主要部分

HTML和CSS中的更改可以忽略不计，因此我只将Jquery粘贴到此处。要了解完整的更改并查看实际的解决方案，请查看此fiddle。

工作解决方案。

Black&白色效果

$(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添加任何类，而是直接通过jquery更改opacity。

此外，如果您看到，我正在使用的回调是"AfterSlide"。'onSlideAfter'回调不适合我。相反，我尝试了'nAfterSlide，这很有效。

编辑：我在这个问题上做了更多的检查。事实证明，我引用的bxslider脚本文件是旧的3.0版本，因此回调在这方面有所不同。最新版本是4.1.1，网站上提到的回调也适用于此版本。

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

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

相关文章：