Onmousewheel

Javascript utilisant la fonction 'onmousewheel' l'image change quand on fait tourner la molette







<img id="slideshow" src="http://dl.dropbox.com/u/3774870/teapots/img1-6.jpg" />

<script type="text/javascript">

var myimages=[
    "http://dl.dropbox.com/u/3774870/teapots/img2-6.jpg",
    "http://dl.dropbox.com/u/3774870/teapots/img3-6.jpg",
    "http://dl.dropbox.com/u/3774870/teapots/img4-6.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)


</script>

Démonstration : les images défilent quand la molette de la souris est utilisée sur l'image