添加类 '主动'，以电流控制

我用一个简单的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的

，我想将类'active'添加到当前控件中，但滑块中可见元素的位置每次都会更改，并且它是第一个元素每一次。我怎样才能做到这一点？

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

来源

2015-04-02 truslivii.lev

也许你可以利用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

编辑

Here是摆弄数据属性的使用按照意见。

来源

2015-04-02 09:11:33 mzografski

感谢小号很多，第二个代码是我需要的 – 2015-04-02 09:30:10

不客气。有可能有一个更优雅的解决方案，但这是我在初级视觉中所看到的。您还可以考虑使用一些数据属性来处理幻灯片实际索引。 – mzografski 2015-04-02 09:44:28

那么，使用一些数据属性来保留幻灯片的索引是一个有趣的想法。 – 2015-04-02 09:52:29

由于要附加元素越来越指数，并基于该处理的活性会导致问题，因此基于当前项目的文本是可见的，我们可以设置在滑盖活跃

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

来源

2015-04-02 09:14:44

不，这绝对不是解决方案，因为我可以在幻灯片中放置任何文本。 – 2015-04-02 09:54:04

添加类 '主动'，以电流控制

回答

相关问题