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> 

: 나는 슬라이드 스스로 3 초마다 회전하지만 나는이 부분을 알아낼 수 없습니다 그래서 여기

가 수평 아코디언의 코드입니다 ... 여기에 자동 회전 기능을 추가 할 여기

는 소속 자바 스크립트입니다 : 아무도 나를 슬라이드 자동 회전마다 3 초 만들기위한 몇 가지 지혜가있는 경우

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

그 놀랄 것입니다. 고맙습니다!

Answer 1

첫 번째 - 나는 길을 느끼지 않는다. prev()를 사용한다. trigger ('something') 나는 그것이 무엇을위한 것인지 모른다. 다른 요소에 이벤트를 채우는 것처럼 보입니다.

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

당신은 어떤 클래스 등