Javascript 使制表符自动旋转？

我不是很精通JS，我想帮我解决一个问题。 我想让Drupal网站上的标签自动旋转，但用户仍然可以点击它们。 这是我的代码：

        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script type="text/javascript">        
        $('ul.checklist-select li').click(function () {
        var selectID = $(this).attr('id');
        $('ul.checklist-select li').removeClass('active');
        $(this).addClass('active');
        $('.first-box, .second-box, .third-box, .fourth-box').fadeOut(300);
        $('.' + selectID + '-box').delay(300).fadeIn(300);});
        </script>

$（'ul.checklist-select li'）。单击（函数（）{
var selectID=$（this.attr（'id'）；
$（'ul.checklist-select li'）。removeClass（'active'）；
$（this.addClass（'active'）；
$（'.第一个框、.第二个框、.第三个框、.第四个框'）。淡出（300）；
$（'.+selectID+'-box'）.delay（300）.fadeIn（300）；}）；

---

我尝试了一些选择，但没有成功。非常感谢！非常感谢您的时间和帮助。

好吧，您需要添加一个时间间隔来更新视图并旋转到下一个（如果是最后一个，则是第一个）

尝试以下方法（未测试）：

var index=0，//当前页签的索引
interval=setInterval（函数（）{rotate（）；}，5000），//interval
$tabs=$（'ul.checklist select'），
$content=$（'.checklist_wrap'）；
//单击处理程序
$（'ul.checklist-select li'）。每个（功能（i）{
$（此）。单击（函数（）{
指数=i；
开关元件（）；
});
});
函数rotate（）{
//将索引更新到下一个
索引++；
//检查此索引是否有效，或重置为0
如果（索引>=$tabs.children（'li'）。长度）
指数=0；
开关元件（）；
}
函数switchElement（）{
间隔时间；
//从当前选项卡中删除类
$（'ul.checklist-select li'）。removeClass（'active'）；
$（'.checklist_wrap.box'）。淡出（300）；
//展示
$tabs.children（'li'）.eq（index）.addClass（'active'）；
$content.children（'.box'）.eq（索引）、delay（300）、fadeIn（300）；
//重置间隔
interval=setInterval（函数（）{rotate（）；}，5000）；
}

---

您可能需要补充的是，当有人单击选项卡时，间隔会重置。

否，我希望图像与选项卡一起沿水平方向旋转。他们的方式，他们做点击，但要自动。谢谢。嗨，非常感谢。刚试过，但不起作用。它开始旋转，但整个选项卡+图像部分消失。如果单击任何选项卡，也会发生同样的情况。嗨，是的，我只是快速浏览了一下您网站的源代码，所以一些选择器可能不正确。我刚更新过，你能再试一次吗？嗨，现在好多了。现在，它只是开始旋转，但图像消失，选项卡菜单转到左侧，没有活动或悬停状态。奇怪的尝试更新选择器，但结果完全相同。非常感谢你帮我做这个。嗨，是的，有两个错误。我已经更新了代码。你也可以看看这把小提琴：。我还包括了一个间隔重置。嗨！！它工作得非常好！我非常感谢你的帮助！！！了不起的工作。非常感谢！你今天救了我的头：））今天晚些时候我会把它放到网上，你会看到的。

<script type="text/javascript">
var index = 0, // Index of current tab
    interval = setInterval(function () { rotate(); }, 5000), // Interval
    $tabs = $('ul.checklist-select'),
    $content = $('.checklist_wrap');

// Click handler
$('ul.checklist-select li').each(function (i) {
    $(this).click(function () {
        index = i;
        switchElement();
    });
});

function rotate() {
    // Update index to next one
    index++;

    // Check if this is a valid index, or reset to 0
    if (index >= $tabs.children('li').length)
        index = 0;

    switchElement();
}

function switchElement() {
    clearInterval(interval);

    // Remove class from current tab
    $('ul.checklist-select li').removeClass('active');
    $('.checklist_wrap .box').fadeOut(300);

    // Show
    $tabs.children('li').eq(index).addClass('active');
    $content.children('.box').eq(index).delay(300).fadeIn(300);

    // Reset interval
    interval = setInterval(function () { rotate(); }, 5000);
}
</script>