JQuery Cycle Pause OnClick Image

Question

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

LINK拨弄： 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; 
}); 

Answer 1

通过检查plugin's API reference，它看起来像所有你需要做的是拨打.cycle("toggle")切换暂停/恢复幻灯片。

我编辑了你的代码，并在JavaScript的底部包含了以下内容。

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

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

查看此JS fiddle - http://jsfiddle.net/skoshy/ka2Xs/20/