Question

我有一个位于staging.asla.org/sustainablesites/secondary.html的幻灯片，它使用easySlider插件加上jQuery Toggle功能。

目前，当您浏览幻灯片时，描述会保持显示或隐藏状态。我希望幻灯片的导航控制切换功能，当您单击下一个按钮时，如果显示说明，我希望它向下滑动，然后在到达下一张幻灯片时向上滑动。

这可行吗？

谢谢！

Answer 1

你可以试试这个...它不是那么漂亮，但它有效。将它添加到$（document）.ready（function（）{

中

$("#nextBtn,#prevBtn").live('click',function(){
 if ($('.block').css('display') != 'none') {
  $(".block").slideToggle().slideToggle();   
 }
})

而不是if语句..使用起来可能更清晰：

if ($('.block').is(':visible')) {...}

Answer 2

我没有详细研究过这个问题，但我的感觉是，就像插件一样，不，你不能。

您可能需要修改插件。但首先，将您的设置代码更改为类似的内容，将预告片作为选项传递：

    var options = {
        teaser: $("#slider li .block")
    };

否修改插件。这几乎可以工作，但可能写得好一点。

    $("#slider").easySlider(options);

        $("a", "#" + options.nextId).click(function() {
            if (options.teaser) {
                options.teaser.slideToggle();
            }
            animate("next");
            if (t >= ts) $(this).fadeOut();
            $("a", "#" + options.prevId).fadeIn();
            if (options.teaser) {
                options.teaser.slideToggle();
            }
        });

您还需要修改prevId处理程序。

另外，为了使这更好，请将以下代码行放在函数中：

            animate("next");
            if (t >= ts) $(this).fadeOut();
            $("a", "#" + options.prevId).fadeIn();
            if (options.teaser) {
                options.teaser.slideToggle();
            }

并在第一个幻灯片切换中从一个匿名函数调用它，有点像这样：

            if (options.teaser) {
                options.teaser.slideToggle(function(){myNewFunc();});
            }
            else{
                myNewFunc();
            }

您可能必须从fadeOut（）/ fadeIn（）

执行相同的操作

玩游戏看看你的想法。

Jquery Slider和Toggle

2 个答案: