Wie Auto-Rotation auf ein jQuery Horizontal Akkordeon hinzufügen

Question

Ich habe eine horizontale Akkordeon gebaut, dass belebt auf Klick. Ich mag autorotierende Funktionalität, um es hinzuzufügen, so dass die Folien für sich alle drei Sekunden drehen, aber ich diesen Teil nicht herausfinden können, ...

Hier ist der Code für das Horizontal Akkordeon:

<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>

Hier ist die Javascript mit ihrem verbundenen:

$(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');
    });
});

Wenn jemand hat einige Weisheit für mich die Dias zu machen auto-drehen alle 3 Sekunden, die erstaunlich sein würde. Vielen Dank!

Answer 1

First - I don't feel the way You use prev().trigger('something') I'm not sure what it's for. It looks like it populates the event to other elements. I don't get it ;)

As for the question: You should do something like this:

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

You might need to change some classes etc.