0

我正在尝试为当前幻灯片之前的每个幻灯片导航项目符号添加一个类。

现在，如果您单击下一步按钮，它会添加一个类。但是，当单击上一个按钮时，我无法弄清楚如何删除该类。

类似的东西

$(document).ready(function($) {

    slider = $('.slider').bxSlider({

    onSlideBefore: function(){

     var current = slider.getCurrentSlide();
      if (slide-data-index <= current) {
        $('.bx-pager .bx-pager-item a').addClass('past');
      } else {
        $('.bx-pager .bx-pager-item a').removeClass('past');
    }
});

这就是我到目前为止所做的工作：http: //jsfiddle.net/mreee/xVnQY/

我不知道为幻灯片分配一个变量

4

1 回答 1

1

我不明白的一件事是为什么您的 CSS、HTML 和 jQuery 彼此不一致。您在 CSS 和 jQuery 中引用的类或元素不在 HTML 中。我只是猜测您没有粘贴完整的 HTML。

无论如何，我检查了你的代码并为你发布了一个更简单易懂的解决方案。我没有对 HTML/CSS 进行任何更改，所以我只会粘贴 jQuery。我还引用了bxslider JS file小提琴中的外部元素，您可以在左侧窗格中看到。

这是对外部 bxslider 文件的引用。

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

jQuery

jQuery(document).ready(function () {
    $('.slider').bxSlider({
        mode: 'horizontal',
        speed: 500,
        pager: true,
        controls: true,
        auto: false,
        infiniteLoop: false,
        hideControlOnEnd: true,
        onSlideNext: function () {
            $('.slider h3').addClass('blueylooey');
        },
        onSlidePrev: function () {
            $('.slider h3').removeClass('blueylooey');
        }  
    });

});

这是一个工作演示

于 2013-08-22T07:16:18.927 回答