jQuery的周期插件事件

Question

我有这样的jQuery代码（在页面加载时，其自动启动）

$('#slideshow').cycle({ 
     fx:  'scrollLeft', 
     timeout: 10, 
     speed: 10, 
     autostop: 3 
    }); 

我想要的幻灯片开始，而只需点击周围的容器我的想法是在：

$('#main-area').bind('click', function() { 
    $('#slideshow').cycle({ 
     fx:  'scrollLeft', 
     timeout: 10, 
     speed: 10, 
     autostop: 3 
    }); 
}); 

然而，这不起作用..而如果我改变'＃main-area'文件它的作品，但所有的图像垂直加载到浏览器，直到我点击文档...我应该重写样式：显示：没有;或者这可以用一种不同的方法很容易地修复？

的HTML：

<div id="main-area"> 
     <div id="slideshow" class="pics"> 
      <img src="media/images/stuff.jpg" /> 
      <img src="media/images/morestuff.jpg" /> 
      <img src="media/images/stuffff.jpg" /> 
     </div> 
    </div> 

Answer 1

在有.pause()方法，尝试在启动插件，并在页面加载暂停它，那么当$("#main-area")或$(document)点击事件，在这里使用的.resume()方法，例如插头：

http://jquery.malsup.com/cycle/pause.html

在线演示：http://jsfiddle.net/tpak3/2/