JQuery 循环暂停 OnClick 图像答案

【问题标题】：JQuery Cycle Pause OnClick ImageJQuery 循环暂停 OnClick 图像
【发布时间】：2013-12-09 16:38:28
【问题描述】：

我的页面上有一个带有寻呼机的 JQuery Cycle 库。只需在 Javascript 中添加“pause: 1”即可轻松添加暂停功能。但这是悬停图像的暂停。如何在大图像上添加带有单击功能的暂停/恢复功能。因此，如果我单击大图像，它会暂停幻灯片，再次单击会恢复它？

链接到 FIDDLE： http://jsfiddle.net/ka2Xs/19/

这是我的代码：

HTML

<div id="slideshow" class="pics">        
  <div class="cc"><img src="img/mobile/m1.jpg" height="400px"></div>
  <div class="cc"><img src="img/mobile/m2.jpg" height="400px"></div>
  <div class="cc"><img src="img/mobile/m3.jpg" height="400px"></div>
</div>

<ul id="nav" class="clearfix">
  <li><a href="#"><img src="img/mobile/m1_thumb.jpg" height="70"></a></li>
  <li><a href="#"><img src="img/mobile/m2_thumb.jpg" height="70"></a></li>
  <li><a href="#"><img src="img/mobile/m3_thumb.jpg" height="70"></a></li>
</ul>

Javascript

$('#slideshow').cycle({ 
fx:     'fade', timeout: 5000, height: 400, pager:  '#nav',
pagerAnchorBuilder: function(idx, slide) {         
// return selector string for existing anchor 
    return '#nav li:eq(' + idx + ') a'; 
    }     
});  
$('#direct').click(function() { 
    $('#nav li:eq(2) a').trigger('click'); 
    return false; 
});

【问题讨论】：

标签： jquery html onclick slideshow cycle

【解决方案1】：

通过检查plugin's API reference，您似乎只需调用.cycle("toggle") 即可切换暂停/恢复幻灯片。

我编辑了您的代码并在您的 JavaScript 底部添加了以下内容。

$('#slideshow img').click(function() {
    $('#slideshow').cycle('toggle');
});

这使得每当在幻灯片中单击图像时，它都会暂停。

看看这个 JSfiddle - http://jsfiddle.net/skoshy/ka2Xs/20/

【讨论】：

谢谢 S.K.正是我正在寻找的！