0

嘿伙计们，建立一个网站，我有两个问题要问你。该网站暂时托管在这里：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. 我的第二个问题应该很简单。查看上面的片段，我希望幻灯片以暂停状态加载，并且仅在单击播放链接时运行。

4

1 回答 1

0

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

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

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

第二个问题似乎很简单：基于插件文档：

假设你有一个播放/暂停 btn

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

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

于 2009-08-17T02:43:09.147 回答