Question

嘿伙计们，建立一个网站，我有两个问题要问你。该网站暂时在此托管：http://wesbos.com/tf/shutterflow/?cat=5。

我有两个问题：

1。目前，幻灯片显示使用保存图像的.slide类来旋转div。在它里面，一类.cover覆盖了数据/半透明背景。

如果你试试这个，它加载很好（由于CSS显示：没有.cover）但是当我点击缩略图时它加载两个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：在点击缩略图时为none？

2。我的第二个问题应该很简单。看一下上面的代码片段，我希望幻灯片加载处于暂停状态，并且只有在点击播放链接时才能运行。

Answer 1

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

第一个问题：将pagerClick选项添加到循环功能。

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

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

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

btnPlayPause.toggle（函数（）{$（ “＃幻灯片”）循环（ '暂停'）;}，函数（）{$（“＃slideshow.cycle（ '恢复'）;}）

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

Jquery循环问题：暂停加载+悬停操作

1 个答案: