javascript - 如何将自定义onClick函数添加到Unslider，以便前进至下一张幻灯片？

我正在尝试使用Unslider创建自定义导航。

当我单击幻灯片时，我想前进到下一张幻灯片。

我是Java的新手。我目前的代码是:

<script>
  jQuery(document).ready(function($) {
    $('.my-slider').unslider({
      arrows:false
    });
  .on('click', function(){
    .unslider('next');
    });
  });
</script>

HTML:

<div class="my-slider">
  <ul>
    <li><img class="img-pad" src="img/img-1.jpg" alt=""></li>
    <li><img class="img-pad" src="img/img-2.jpg" alt=""></li>
    <li><img class="img-pad" src="img/img-3.jpg" alt=""></li>
  </ul>
</div>

我知道这是错误的，但没有错。

最佳答案

您在.之前错误地使用了unslider。请记住，点应始终跟随在对象之后。单独使用点没有任何意义。
因此，您的onClick函数当前不执行任何操作，因为它是这样的:

function(){
          .unslider('next');
};

您正在告诉代码在不存在的实体上调用函数。

尝试以下方法:

function(){
     $('.my-slider').unslider('next');
};

尽管这实际上不起作用(因为unslider是初始化方法)。您需要对unslider对象的引用。所以这可能工作:

function(){
     this.('next');
};

或者，您可以阅读文档并使用其示例来代替:

<script>
    jQuery(document).ready(function($) {

        var slider = $('.my-slider').unslider(
        {
           arrows:false
        });

        slider.on('click', function(){
          slider.unslider('next');
        });
    });

</script>