Question

您好我已经构建了这个Jquery代码。

我希望按钮能够自动循环旋转，任何人都可以帮忙吗？

Jquery代码如下：

$(function() {
  var $items = $('#vtab>ul>li');
  $items.click(function() {
    $items.removeClass('selected');
    $(this).addClass('selected');
    var index = $items.index($(this));
    $('#vtab>div').hide().eq(index).show();
  }).eq(1).mouseover();
});

Html如下：

<div id="vtab">
  <ul>
    <li class="home selected"></li>
    <li class="login"></li>
    <li class="support"></li>
  </ul>
  <div>
    <h4>Home Insurance</h4>
  </div>
  <div>
    <h4>Secure Login</h4>
    <form id="loginForm" action="">
      <fieldset>
        <legend>You need to sign in with your Email & Password to continue.</legend>
        <div>
          <label for="email">Email:</label>
          <input type="text" name="email" id="email" />
        </div>
        <div>
          <label for="password">Password:</label>
          <input type="password" name="password" id="password" />
        </div>
        <div>
          <input id="login" type="submit" value="Fake Login" />
        </div>
      </fieldset>
    </form>
  </div>
  <div>
    <h4>Online Support</h4>
    Maecenas in varius nulla....
  </div>
</div>

我希望按钮循环而不是仅仅在你悬停

时

Answer 1

您似乎希望自动循环显示一组标签。幸运的是，jQuery UI团队为我们提供了一个很好的工具调用Tabs，可以做到这一点。更具体地说，Tabs中有一个名为.rotate()的方法，它允许你提供和间隔（以ms为单位）和一个命令，一旦它完成就重复这个循环。

Tabs page上提供的示例代码非常类似于您的代码，这使得实现jQuery UI解决方案相对轻松。

Answer 2

无法看到您的信息页。你能重新发布网址吗？

我在这里建了一个。看一看，看看你想要的是什么： http://www.castlerockinvestments.ca/dev/index_banner.jsp

如果这就是你想要的，你可能需要自己更改源代码，因为我知道。 JQuery循环的作者在那里得到了很多选项的示例代码。我假设你已经看到了所有这些：http://jquery.malsup.com/cycle/pager-over.html

选项卡上的jQuery循环效果

2 个答案: