Jquery 循环问题：加载时暂停 + 悬停动作答案

【问题标题】：Jquery Cycle Questions: Pause on load + Hover ActionJquery 循环问题：加载时暂停 + 悬停动作
【发布时间】：2009-08-17 01:59:18
【问题描述】：

大家好，建立一个网站，我有两个问题要问你。该网站暂时托管在这里：http://wesbos.com/tf/shutterflow/?cat=5。

我有两个问题：

1．目前，幻灯片使用包含图像的 .slide 类旋转 div。在其中，一类 .cover 用数据/半透明背景覆盖它。

如果您尝试此操作，它可以正常加载（由于 .cover 上的 CSS display:none），但是当我单击缩略图时，它会加载两个 div，而不是将 display:none 应用于 .cover div。只有当我将鼠标悬停在上面时它才会消失。我正在使用 Jquery Cycle，我的代码如下所示：（在 shutterflow.js 中找到）

$(document).ready(function() {
$('#slideshow').cycle({
    fx:     'fade', 
next:   '#next', 
    pause: 1,
prev:   '#prev',
    pause:  '#pause',
    pager:  '.thumbs',
    pagerAnchorBuilder: function(idx, slide) {
                    var src = $('img',slide).attr('src');
                    return '<li><a href="#"><img src="' + src + '"  height="75" /></a></li>';
            } 
});

和

        $(document).ready(      
              function() {
                $('.slide').hover(
                  function() {  $(".cover").fadeIn('500'); },
                  function () { $(".cover").fadeOut('500');
                 }  );
        }  );

当单击缩略图时，如何让 .cover 加载为 display:none？

2.我的第二个问题应该很简单。查看上面的 sn-p，我希望幻灯片以暂停状态加载，并且仅在单击播放链接时才运行。

【问题讨论】：

标签： javascript jquery cycle

【解决方案1】：

编辑：添加第一个问题的答案。

第一个问题：在循环函数中添加 pagerClick 选项。

pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();}

第二个问题似乎很简单：基于插件doc:

假设你有一个播放/暂停按钮

btnPlayPause.toggle(function(){$("#slideshow").cycle('pause');},function(){$("#slideshow.cycle('resume');})

您还可以更改这些功能中的播放/暂停按钮图像。也看here

【讨论】：

这几乎成功了，我使用了您在页面加载时提供的暂停代码。 .cover 隐藏效果也很好，但现在它们会在每次转换时显示（每次淡出后）。如何在 500 毫秒后隐藏 div（也就是让 div 淡出然后隐藏）？
我注意到您的播放暂停代码中有错字。简历拼写错误。