jquery - Jquery 滑块和切换

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()相当的事情

玩一玩，看看你的想法。