Question

我在页面上使用了一个简单的jquery淡入淡出滑块

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);
};

我想添加课程＆＃39; active＆＃39;当前控制，但滑块中可见元素的位置每次都会改变，并且每次都是第一个元素。我怎么能这样做？

http://jsfiddle.net/u9d3xa1q/11/

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');

如果您需要无限滑动，可能需要更改以上内容。以下是与当前小提琴相匹配的代码：

            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

修改

Here是根据评论使用数据属性的小提琴。

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');

添加课程＆＃39; active＆＃39;目前的控制

2 个答案: