单击模拟选项卡以在jquery中创建选项卡的幻灯片

时间:2011-01-17 17:16:21

标签: jquery

我在下面有一个很好的工作标签系统...但我希望它开始模仿点击它的人,有效地创建从llist到另一个的幻灯片...

//Homepage Tabs  
$('#lcontent .tab:first').show();   
$('#llist li').click(function() {
    var thisTop = $(this).position().top;
    $('.pointer').animate( {'top': thisTop} );
    $('#llist li').removeClass('current');
    $(this).addClass('current');
    var id = $("li.current a").attr('href');
    $("#lcontent div").fadeOut(500).hide();   
    $(id).fadeIn();   
return false;
});

HTML列表:

<ul id="llist">
   <li class="t current"><a href="#sagesolutions"><span>sage solutions</span></a><img width="24" height="70" class="pointer" title="pointer" src="assets/site_images/bg-tab-leader-arrow.png"></li>
   <li class="m"><a href="#creditmanagement"><span>credit mangement solutions</span></a></li>
   <li class="b"><a href="#thirdparty"><span>third party additions</span></a></li>

内容标签

<div id="lcontent">
  <div class="tab" id="sagesolutions" style="display: block;">
    <h2>sage solutions</h2>
    Sage content
    <hr>
    <a class="btn-solutionstart" href="solutions/sage/which-sage">
    <p>Unsure which solution is best for your business?<br>
      <span>Use our step-by-step guide...</span></p>
    </a> </div>
  <div class="tab" id="creditmanagement">
    <h2>credit management solutions</h2>
    Credit content </div>
  <div class="tab" id="thirdparty">
    <h2>third party additions</h2>
    Third party content </div>
</div>

1 个答案:

答案 0 :(得分:1)

setInterval((function(){
  var count = 0;
  var ul = $('#llist li');

  return function(){
    ul.eq(++count % ul.length).click();
  };
})(), 2000);