Javascript：图像onclick然后滑动大图像

Question

我非常喜欢这个滑块示例HERE!。但我想做的是在右侧的图像显示上分配下一个/上一个onclick命令，如下所示：

而不是点击那些DOTS。我想在图像上分配onclick EVENT（RED BOXES）。

我该如何调整那个。

提前谢谢！

Answer 1

我只是将$navDots变量更改为指向js第90行的图像。

var navDots = $('.nav-images');
this.$navDots = navDots.children( 'img' );

然后使用此HTML：

<div class="nav-images">
      <img src="http://lorempixel.com/400/200/city" alt="img01" width="100px"/>
      <img src="http://lorempixel.com/400/200/business" alt="img02" width="100px"/>
      <img src="http://lorempixel.com/400/200/technics" alt="img03" width="100px"/>
      <img src="http://lorempixel.com/400/200/people" alt="img04" width="100px"/>
      <img src="http://lorempixel.com/400/200/nature" alt="img05" width="100px"/>
      <img src="http://lorempixel.com/400/200/sports" width="100px"/>
</div>

希望它有所帮助！请参阅codepen示例！ http://codepen.io/anon/pen/corjw

Answer 2

<强> 声明

请链接到插件的非缩小来源，以便您可以直接修改该文件。目前，该插件处理#cbp-fwslider区域内的所有元素。从外面进行攻击可能并不明智，这就是解决方案的目的......

<强>解决方案

看起来你可以通过隐藏点（这是默认情况下插件使用的点）并使用你的两个元素来触发点上的点击事件来模仿这个。当前活动的点由cbp-fwcurrent表示，因此$('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent')之类的内容将选择当前点。使用jQuery的next()和prev()调用检查相关点是否存在，然后执行$el.trigger('click')。

代码大纲（未经测试）

$('#fwdButton').click(function() {
  var $dot = $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent'),
      $nextDot = $dot.next();
  if ($nextDot) {
    $nextDot.trigger('click');
  }
});

`