title: javascript mousewheel image scroll
body: <p>I am trying to make pictures scroll vertically on mousewheel.
  How to make not to scroll back when it is on start point, from first to the last picture, and not to scroll further when it is on last picture?</p>
  
  <pre><code>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&lt;=-120)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up
              nextslideindex=(nextslideindex&lt;0)? myimages.length-1 : (nextslideindex&gt;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)
  });
  </code></pre>