单击功能到特定幻灯片(superslides插件)

时间:2014-11-05 23:03:10

标签: javascript

我有5个幻灯片的滑块。我有两个链接。第一个链接必须转到幻灯片3,第二个链接必须转到幻灯片5。 我不能用标准的分页来做到这一点。我需要点击(function(),但我在这个插件的API中找不到它。

HTML:

<div id="slides">
 <ul class="slides-container">
    <li>
      slide 1
    </li>
    <li>
      slide 2
    </li>
    <li>
      slide 3
    </li>
    <li>
      slide 4
    </li>
    <li>
      slide 5
    </li>
 </ul>

 <header class="header">
   <a href="#" class="link">Link to slide 3</a>
   <a href="#" class="link1">Link to slide 5</a>
   <a href="#" class="link2">Link to google</a>
 </header>
</div>

JS

$('#slides').superslides({
  animation: 'fade'
});

1 个答案:

答案 0 :(得分:0)

in href add hash width幻灯片编号

<a href="#3" class="link">Link to slide 3</a>
<a href="#5" class="link1">Link to slide 5</a>

修改

<强> HTML

设置attr data-s width 幻灯片编号和班级名称链接

<a href="javascript:" class="link" data-s="1">Link to slide 1</a>
<a href="javascript:" class="link" data-s="3">Link to slide 2</a>

<强> jquery的

$('.link').click(function(){
        var ind=parseInt($(this).data('s'));
        ind--;                
        $('#slides').superslides('animate' , ind)
      })

编辑2

<强> jquery的

$('.link').click(function(){
        var ind=parseInt($(this).data('s'));
        ind--;                
        $('#slides').superslides('animate' , ind)

        $('.link').removeClass('current');
        $(this).addClass('current')
      })