title: jquery mouse scroll change div position
body: <p>How can I use the mouse scroll event to control a <code>div</code>'s position?</p>
  
  <p>I have 12 <code>li</code>s where only 5 of them are visible at any time. I want to be able to show different <code>li</code> elements when the scroll wheel scrolls. If possible, I'd like this in a circular layout.</p>
  
  <p>I don't want scroll my page, but something like a gallery. If you imagine all my <code>li</code> elements as photos, if the mouse is scrolled the photos change position in the horizontal direction, something like <a href="http://viralpatel.net/blogs/demo/javascript-mouse-scroll-wheel-event.html" rel="nofollow">http://viralpatel.net/blogs/demo/javascript-mouse-scroll-wheel-event.html</a></p>
  
  <p>I need to do this with jQuery and horizontally, not with vanilla JS in the vertical. Is there a plugin or some working code?</p>
  
  <p><a href="http://jsfiddle.net/gAMyR/" rel="nofollow">fiddle</a></p>
  
  <pre><code>&lt;script src="jquery.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $(document).ready(function() {
         //jQuery code
      });
  &lt;/script&gt;
  
  &lt;style&gt;
      * { padding: 0; margin: 0; }
      div, ul { height: 100px; width: 500px; display: block; overflow: hidden; }
      div { position: relative; }
      ul { position: absolute; }
      li { float: left; height: 98px; width: 98px; display: block; list-style: none; border: 1px solid #aaa; }
  &lt;/style&gt;
  
  &lt;div&gt;
      &lt;ul&gt;
          &lt;li&gt;1&lt;/li&gt;
          &lt;li&gt;2&lt;/li&gt;
          &lt;li&gt;3&lt;/li&gt;
          &lt;li&gt;4&lt;/li&gt;
          &lt;li&gt;5&lt;/li&gt;
          &lt;li&gt;6&lt;/li&gt;
          &lt;li&gt;7&lt;/li&gt;
          &lt;li&gt;8&lt;/li&gt;
          &lt;li&gt;9&lt;/li&gt;
          &lt;li&gt;10&lt;/li&gt;
          &lt;li&gt;11&lt;/li&gt;
          &lt;li&gt;12&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>