如何向jQuery水平折叠面板添加自动旋转

Question

我已经构建了一个水平的手风琴，在点击的时候会有动画效果。我想给它添加自动旋转功能，这样幻灯片就会每三秒钟自动旋转一次，但我不能弄清楚这一部分……

以下是水平折叠的代码：

<div id="slideshow">
<ol id="slides">
    <li class="slide open active" id="slide-1">
        <a href="recipe_detail.aspx?did=1014"><img src="media/images/recipes/featured-tuna-chop-chop-salad.jpg" alt="" /></a>
        <a class="slidebutton" href="javascript:void(0);"></a>
    </li>
    <li class="slide open" id="slide-2">
        <a href="recipe_detail.aspx?did=1016"><img src="media/images/recipes/featured-tuna-rolls-with-GS-sauce.jpg" alt="" /></a>
        <a class="slidebutton" href="javascript:void(0);"></a>
    </li>
    <li class="slide open" id="slide-3">
        <a href="recipe_detail.aspx?did=1101"><img src="media/images/recipes/featured-salmon-breakfast-strudel.jpg" alt="" /></a>
        <a class="slidebutton" href="javascript:void(0);"></a>
    </li>
    <li class="slide open" id="slide-4">
        <a href="recipe_detail.aspx?did=775"><img src="media/images/recipes/featured-chunky-tuna-potato-salad.jpg" alt="" /></a>
        <a class="slidebutton" href="javascript:void(0);"></a>
    </li>
    <li class="slide open" id="slide-5">
        <a href="recipe_detail.aspx?did=988"><img src="media/images/recipes/featured-clam-and-artichoke-mini.jpg" alt="" /></a>
        <a class="slidebutton" href="javascript:void(0);"></a>
    </li>
    <li class="slide open" id="slide-6">
        <a href="recipe_detail.aspx?did=598"><img src="media/images/recipes/featured-salmon-party-app.jpg" alt="" /></a>
        <a class="slidebutton" href="javascript:void(0);"></a>
    </li>
    <li class="slide open" id="slide-7">
        <a href="recipe_detail.aspx?did=425"><img src="media/images/recipes/featured-tortellini-tuna-salad.jpg" alt="" /></a>
        <a class="slidebutton" href="javascript:void(0);"></a>
    </li>
</ol>
<ol id="slidecontents">
    <li class="slidecontent open" id="content-slide-1">
        <p><span class="featureRecipeTitle">Stir Fried &ldquo;Chop Chop&rdquo; Salad</span></p>
        <div class="recipeSliderGetRecipe"><a href="recipe_detail.aspx?did=1014"><img src="media/images/recipes/button-get-the-recipe.png"></a></div>
    </li>
    <li class="slidecontent" id="content-slide-2">
        <p><span class="featureRecipeTitle">Tuna Rolls with Fresh Ginger Dipping Sauce</span></p>
        <div class="recipeSliderGetRecipe"><a href="recipe_detail.aspx?did=1016"><img src="media/images/recipes/button-get-the-recipe.png"></a></div>
    </li>
    <li class="slidecontent" id="content-slide-3">
        <p><span class="featureRecipeTitle">Mermaid's Breakfast Strudel</span></p>
        <div class="recipeSliderGetRecipe"><a href="recipe_detail.aspx?did=1101"><img src="media/images/recipes/button-get-the-recipe.png"></a></div>
    </li>
    <li class="slidecontent" id="content-slide-4">
        <p><span class="featureRecipeTitle">Chunky Tuna Potato Salad</span></p>
        <div class="recipeSliderGetRecipe"><a href="recipe_detail.aspx?did=775"><img src="media/images/recipes/button-get-the-recipe.png"></a></div>
    </li>
    <li class="slidecontent" id="content-slide-5">
        <p><span class="featureRecipeTitle">Clam &amp; Artichoke Mini Melts</span></p>
        <div class="recipeSliderGetRecipe"><a href="recipe_detail.aspx?did=988"><img src="media/images/recipes/button-get-the-recipe.png"></a></div>
    </li>
    <li class="slidecontent" id="content-slide-6">
        <p><span class="featureRecipeTitle">Salmon Party Spread Appetizer</span></p>
        <div class="recipeSliderGetRecipe"><a href="recipe_detail.aspx?did=598"><img src="media/images/recipes/button-get-the-recipe.png"></a></div>
    </li>
    <li class="slidecontent" id="content-slide-7">
        <p><span class="featureRecipeTitle">Tortellini Tuna Salad</span></p>
        <div class="recipeSliderGetRecipe"><a href="recipe_detail.aspx?did=425"><img src="media/images/recipes/button-get-the-recipe.png"></a></div>
    </li>
</ol>

​

下面是附属于它的javascript：

$(document).ready(function() {
    $('#nav li').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });

    $('.slide')
        .bind('open', function() {
            if(! $(this).hasClass('open')) {
                $(this).next().trigger('open');
                $(this).addClass('open');
                $(this).animate({right: "-=423px"});
            } else {
                $(this).prev().trigger('close');
            }
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
        })
        .bind('close', function() {
            if($(this).hasClass('open')) {
                $(this).removeClass('open');
                $(this).animate({right: "+=423px"});
                $(this).prev().trigger('close');
            }
        });

    $('.slidebutton').click(function() {
        $(this).parent().trigger('open');
        $('#content-' + $(this).parent().attr('id')).trigger('show');
    });

    $('.slidecontent').bind('show', function() {
        $('.slidecontent').removeClass('open');
        $(this).addClass('open');
    });

    $('#nav>li').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
});

如果有人能给我一些智慧，让幻灯片每3秒自动旋转一次，那就太棒了。谢谢!

Answer 1

首先，我感觉不到你使用prev().trigger('something')的方式，我不确定它是用来做什么的。它看起来像是将事件填充到其他元素中。我不明白;)

至于问题:你应该这样做：

setInterval(function(){
 $next=$('.active').next('.slide');
 if($next.length==0){ $next=$('.slide:first'); }
 $next.find('.slidebutton').triggerHandler('click');
},3000);

您可能需要更改一些类等。