0

私は JS にあまり精通していないので、抱えている問題を解決したいと思っています。Drupal Web サイトのタブを自動的に回転させたいが、ユーザーはそれらをクリックできるようにしたい。これは私が持っているコードです:

        <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 に答える