Question

我正在制作全屏引导转盘网站。我使用滚动来更改幻灯片，但速度很快。如何减慢滚动速度？我使用这段代码：

$('#mycarousel').bind('mousewheel', function(e)
    {
        if(event.wheelDelta<0) {
            $(this).carousel('next');
        }else if(event.wheelDelta>0){
            $(this).carousel('prev');
        }
    }
);

感谢您的回答：）

Answer 1

在此网站上提出了类似的问题：src：How can I control the speed that bootstrap carousel slides in items?

api无法控制速度。虽然你可以修改负责的css。在carousel.less文件中找到

.item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
}

并将6s更改为您想要的任何内容。

如果您不使用.less，请在bootstrap.css文件中找到：

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

并将0.6s更改为您想要的时间。您可能还想在下面的函数调用中编辑时间：

.emulateTransitionEnd(2000) 
at bootstrap.js in function Carousel.prototype.slide. That synchronize transition and prevent slide to disapear before transition ends.

Answer 2

非常黑客，但应该只在5个卷轴间隔点击滚动

    $('#mycarousel').bind('mousewheel', function(e)
        {
            if(typeof(this.deltasum) == 'undefined'){this.deltasum = 0;}
// On chrome each scroll delta is +-120. Testing if this is cross browser
            this.deltaSum +=event.wheelDelta; // Value will be attached to DOM object


            if(event.wheelDelta<0 && this.deltaSum % 240 === 0) { // only fire if sum is divisible by 120
                $(this).carousel('next');
            }else if(event.wheelDelta>0 && this.deltaSum % 240 === 0){
                $(this).carousel('prev');
            }
        }
    );

如何通过滚动来降低移动自举轮播幻灯片的滚动速度

2 个答案: