Question

我是一个新手，还在学习，我无法解决问题。我在下面有这个代码，我想为滑块添加自动播放功能。非常感谢你的帮助。

$('.feature-selection').click(function () {
        if (!$(this).hasClass('active-feature')) {
            var featureID = '#' + $(this).attr('data-feature-id');
            $('.active-feature').removeClass('active-feature');
            $(this).addClass('active-feature');
            $('.active-feature-detail').addClass('fadeOutLeftBig');
            setTimeout(function () {
                $('.fadeOutLeftBig').removeClass('active-feature-detail');
            }, 500);
            setTimeout(function () {
                $('.fadeOutLeftBig').removeClass('fadeOutLeftBig');
            }, 600);
            $(featureID).addClass('fadeInRightBig');
            var that = featureID;
            setTimeout(function () {
                $(that).removeClass('fadeInRightBig');
            }, 1000);
            $(featureID).addClass('active-feature-detail');
            var newFeatureHeight = $(featureID).height() + 88;

            $('#feature-detail-holder').css('min-height', newFeatureHeight);
        }
    });

Answer 1

var interval = null;
$('#autoplay-button').click(function(){
    interval = setInterval(function(){
        $('.feature-selection').trigger('click');
    }, 10000);
});

$('#stop-autoplay-button').click(function(){
    clearInterval(interval);
});

$('.feature-selection').click(function () {
    if (!$(this).hasClass('active-feature')) {
        var featureID = '#' + $(this).attr('data-feature-id');
        $('.active-feature').removeClass('active-feature');
        $(this).addClass('active-feature');
        $('.active-feature-detail').addClass('fadeOutLeftBig');
        setTimeout(function () {
            $('.fadeOutLeftBig').removeClass('active-feature-detail');
        }, 500);
        setTimeout(function () {
            $('.fadeOutLeftBig').removeClass('fadeOutLeftBig');
        }, 600);
        $(featureID).addClass('fadeInRightBig');
        var that = featureID;
        setTimeout(function () {
            $(that).removeClass('fadeInRightBig');
        }, 1000);
        $(featureID).addClass('active-feature-detail');
        var newFeatureHeight = $(featureID).height() + 88;

        $('#feature-detail-holder').css('min-height', newFeatureHeight);
    }
});

Javascript滑块自动播放

1 个答案: