Question

我发现这个源代码用鼠标滚轮改变图像：

var myimages=[
        "https://d248fncte96e1e.cloudfront.net/xs/0137.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0138.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0139.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0140.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0141.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0142.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0143.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0144.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0145.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0146.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0147.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0148.jpg",
        "https://d248fncte96e1e.cloudfront.net/xs/0149.jpg"                
    ]

    var slideshow=document.getElementById("slideshow")
    var nextslideindex=0

    function rotateimage(e){
        var evt=window.event || e //equalize event object
        var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
        nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up
        nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries
        slideshow.src=myimages[nextslideindex]
        if (evt.preventDefault) //disable default wheel action of scrolling page
            evt.preventDefault()
        else
            return false

    }

    var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

    if (slideshow.attachEvent) //if IE (and Opera depending on user setting)
        slideshow.attachEvent("on"+mousewheelevt, rotateimage)
    else if (slideshow.addEventListener) //WC3 browsers
        slideshow.addEventListener(mousewheelevt, rotateimage, false)});

我希望它在“x”鼠标滚轮“点击”之后更改图像，从根本上减慢速度我已尝试更改增量编号，但它没有任何效果。

的jsfiddle： http://jsfiddle.net/Kv4yB/6/

Answer 1

只需创建一个throttle和throttleIndex，这样你的rotateImage函数实际上只会被调用它的X次。为了减慢速度，增加油门;为了使它更快，减少它。

Live Demo

var throttle = 5;
var throttleIndex = 0;
function rotateimage(e) {
    throttleIndex += 1;

    if (throttleIndex >= throttle) {
        throttleIndex = 0;

        ...
    }
}

慢速鼠标滚轮使用event.detail滚动

1 个答案: