将类'active'添加到当前控件

Question

I use a simple jquery fade slider on my page

HTML

<ul id="slider1" class="images-list">
                        <li style="background-image: url('Content/img/bg_10.jpg')"></li>
                        <li style="background-image: url('Content/img/bg_11.jpg')"></li>
                        <li style="background-image: url('Content/img/bg_12.jpg')"></li>
                    </ul>

                    <ul class="controls">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                    </ul>

jQuery

    $.fn.slider = function () {
    var $this = this;
    var $controls = $this.nextAll('.controls').first();
    var index;

    $this.find('li:gt(0)').hide();
    setInterval(function () {
        $this.find('li:first-child').fadeOut('slow')
            .next('li').fadeIn('slow')
            .end().appendTo($this);

        $controls.find('li').removeClass('active');         
        index = $this.find('li:visible').index();
        $controls.find('li').eq(index).addClass('active');  
    },
    4000);
};

我想将类“active”添加到当前控件，但是滑块中可见元素的位置每次都会改变，并且每次都是第一个元素。我该怎么做？ http://jsfiddle.net/u9d3xa1q/11/

- truslivii.lev

Answer 1

你可以使用jquery.next()和jquery.prev()方法。最初将类设置为控件中的第一个元素。然后：

//on next:
$controls.find('li.active').removeClass('active').next('li').addClass('active');  
//on prev:
$controls.find('li.active').removeClass('active').prev('li').addClass('active');

如果您需要无限滑动，上面的代码需要进行更改。以下是与您当前的fiddle相匹配的代码：

            if ($controls.find('li.active').next('li').length) {
            $controls.find('li.active').removeClass('active').next('li').addClass('active');
        } else {
            $controls.find('li.active').removeClass('active').parent().find('li:first-child').addClass('active');
        }

fiddle

编辑

这里是一个fiddle，其中包含了根据评论使用数据属性的示例。

- mzografski

---

不用谢。可能有更优雅的解决方案，但这是我在第一时间想到的。您还可以考虑使用一些数据属性来存储幻灯片的真实索引。 - mzografski

使用一些数据属性来保持幻灯片的索引是一个有趣的想法。 - truslivii.lev

编辑了答案，包括一个数据属性示例。 - mzografski

谢谢，这正是我想的一样。 - truslivii.lev

Answer 2

由于您正在附加元素并基于此获取索引并处理活动，这将导致问题。因此，根据当前可见的项目文本，我们可以在滑块中设置活动状态。

http://jsfiddle.net/u9d3xa1q/14/

var index = $this.find('li:first').text();

            if(index == "11")
                index =0;
            else if (index == "22")
                index =1;
            else
                index =2;
            $controls.find('li').eq(index).addClass('active');

- Sridhar Narasimhan

---

不，这绝对不是一个解决方案，因为幻灯片中的文本可以是任何内容。 - truslivii.lev