如何减缓移动引导旋转木马滑动滚动的滚动速度

Question

我正在制作一个全屏引导旋转木马网站。我用滚动来换幻灯片，但速度太快了。如何降低滚动速度?我使用以下代码:

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

谢谢你的回答

Answer 1

这是一个非常好的hack，但是应该只在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');
            }
        }
    );

Answer 2

在src这个网站上也有人问过类似的问题:我如何控制项目中引导旋转木马滑动的速度?

api无法控制速度。不过你可以修改负责这个的css。在旋转木马上。查找

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