Slow mousewheel Scroll with event.detail

Question

I've found this source code to change an image with mousewheel:

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)});

I want it to change the image after "x" mousewheel "clicks", essentially slowing it down I've tried changes the delta number but it had no effect.

Jsfiddle: http://jsfiddle.net/Kv4yB/6/

Answer 1

Just create a throttle and throttleIndex so that your rotateImage function only actually fires every X times it's called. To make it slower, increase the throttle; to make it faster, decrease it.

Live Demo

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

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

        ...
    }
}