0

我对 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>

我尝试了几个选项，但它不起作用。非常感谢！感谢您的时间和帮助。

4

1 回答 1

1

好吧，您想添加一个间隔来更新视图并旋转到下一个（或第一个，如果它是最后一个）。

试试这个（未测试）：

<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>

您可能要添加的内容是，当有人单击选项卡时会重置间隔。

于 2013-02-21T08:08:34.967 回答