Question

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

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

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

~~您可能想要添加的内容是当有人点击标签时重置间隔。~~

制作标签会自动旋转？

1 个答案: