Question

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

LINK TO 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; 
});

Answer 1

通过查看plugin's API reference，您需要做的就是调用.cycle("toggle")切换暂停/恢复幻灯片显示。

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

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

这样，只要在幻灯片中点击图像，它就会暂停。

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

JQuery循环暂停OnClick图像

1 个答案: