Question

我想设置以下猫头鹰轮播，以便在加载页面时自动启动。我尝试使用以下变量进行此操作：

autoplay: true, 
autoplayTimeout: 100, 
autoplaySpeed:100,

但是轮盘动画将不再停止。当我单击“跳转”按钮时，正常的动画将以我在js varialbe中设置的数字“ itemSelected”开始和停止。

如何构建这种“轮盘赌”动画，使其在加载页面时开始，并停止在我在var“ itemSelected”变量中设置的值处停止？

感谢您的帮助和时间，戴夫

var stoping = false;
var itemSelected = 0;

jQuery(function ($) {
    var $owl = $('.owl-carousel');
    
    // Initialize Owl
    $('.owl-carousel').owlCarousel({
		autoplay: true,
		autoplayTimeout: 100,
		autoplaySpeed: 100,
        center: true,
        loop: true,
        margin: 10,
        nav: false,
        mouseDrag: false,
        touchDrag: false,
        pullDrag: false,
        dots: false,
        responsive: {
            0: {
                items: 3
            },
            600: {
                items: 3
            },
            1000: {
                items: 7
            }
        }
    });

    // Click in button Jump
    $('#js-btn-jump').click(function (e) {
        e.preventDefault();
        stoping = false;
        // Random between 1 and 10
        itemSelected = 8;
        var $jump = $(this);
        $jump.html('Jumping ...');
        $jump.attr('disabled', 'disabled');
        // Trigger autoplay owl
        $owl.trigger('play.owl.autoplay', [100]);
        // Slow speed by step
        setTimeout(slowSpeed, 2000, $owl, 200);
        setTimeout(slowSpeed, 4000, $owl, 250);
        setTimeout(slowSpeed, 5000, $owl, 300);
        setTimeout(stopAutoplay, 6000);
        return false;
    });

    // Event changed Owl
    $owl.on('changed.owl.carousel', function (e) {
        if (stoping) {
            // Examine only if roulette stop
            var index = e.item.index;
            var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
            var item = element.data('item');
            if (item == itemSelected) {
                // If element equals to random, stop roulette
                $owl.trigger('stop.owl.autoplay');
                $('#js-btn-jump').html('Jump');
                $('#js-btn-jump').removeAttr('disabled');
            }
        }
    });

    // Showcase
    //slowSpeed($owl, 1400);

});

/**
 * Reduce speed roulette
 * @param {type} $owl
 * @param {type} speed
 * @returns {undefined}
 */
function slowSpeed($owl, speed) {
    $owl.trigger('play.owl.autoplay', [speed]);
}

/**
 * Stop autoplay roulette
 * @returns {undefined}
 */
function stopAutoplay() {
    stoping = true;
}

.owl-carousel .item {
    height: 200px;
    width: auto;
    background: #4DC7A0;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: bold;
}
.owl-carousel .item h4 {
    color: #FFF;
    font-weight: 400;
    margin-top: 0rem;
}
.btn-jump::after {
    content: '';
    position: absolute;
    left: 44%;
    top: -30%;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #2b3843;
    clear: both;
}
.btn-jump {
    z-index: 999;
    margin-top: 5px;
    width: 300px;
    position: relative;
    background-color: #2b3843;
    color: white;
    padding: 20px;
}
.wrap-jump {
    text-align: center;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Owl Roulette</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
        <link rel="stylesheet" href="assets/main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
        <script src="assets/roulette.js"></script>
    </head>

    <body>
        <div class="owl-carousel owl-theme">
            <div class="item element-roulette" data-item="1"><h4>1</h4></div>
            <div class="item element-roulette" data-item="2"><h4>2</h4></div>
            <div class="item element-roulette" data-item="3"><h4>3</h4></div>
            <div class="item element-roulette" data-item="4"><h4>4</h4></div>
            <div class="item element-roulette" data-item="5"><h4>5</h4></div>
            <div class="item element-roulette" data-item="6"><h4>6</h4></div>
            <div class="item element-roulette" data-item="7"><h4>7</h4></div>
            <div class="item element-roulette" data-item="8"><h4>8</h4></div>
            <div class="item element-roulette" data-item="9"><h4>9</h4></div>
            <div class="item element-roulette" data-item="10"><h4>10</h4></div>
        </div>
        <div class="wrap-jump">
            <button class="btn-jump" id="js-btn-jump">Jump</button>
        </div>
    </body>
</html>

猫头鹰轮播-页面加载开始/停止轮盘动画

0 个答案: