如何向jQuery水平手风琴添加自动旋转 [英] How to Add Auto-Rotation to a jQuery Horizontal Accordion
本文介绍了如何向jQuery水平手风琴添加自动旋转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我构建了一个水平的手风琴，可以在单击时进行动画处理.我想为其添加自动旋转功能，以使幻灯片每三秒钟自动旋转一次，但是我无法弄清楚这部分...
I've built a horizontal accordion that animates on click. I want to add auto-rotating functionality to it so the slides will rotate by themselves every three seconds but i cannot figure this part out...
这是水平手风琴的代码:
Here is the code for the Horizontal Accordion:
<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 “Chop Chop” 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 & 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:
Here is the javascript affiliated with it:
$(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秒自动旋转一次，那就太好了.谢谢！
If anybody has some wisdom for me to make the slides auto-rotate every 3 seconds that would be amazing. Thank You!
推荐答案
首先-我不了解您使用prev().trigger('something')的方式，我不确定它的用途.看起来它将事件填充到其他元素中.我不明白;)
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.
这篇关于如何向jQuery水平手风琴添加自动旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
