title: simulating mouse drap /touch drag movement in javascript
body: <p>So I have some javascript that when a person clicks and drags or drags their finger (on mobile devices) and cycles though a series of images to create a 360 image rotation effect. Heres the code.</p>
  
  <pre><code>    $(document).ready(function ($) {
      var $product = $('#product'),
          $imgs = $product.find(".child"),
          imageTotal = $imgs.length - 1,
          clicked = false,
          widthStep = 20,
          currPos,
          currImg = 0,
          lastImg = 0;
      $imgs.bind('mousedown', function (e) {
          e.preventDefault(); // prevent dragging images
      })
          .filter(':gt(0)').addClass('notseen');
  
      $product.bind('mousedown touchstart', function (e) {
          if (e.type == "touchstart") {
              currPos = window.event.touches[0].pageX;
          } else {
              currPos = e.pageX;
          }
          clicked = true;
  
      });
      $(document)
          .bind('mouseup touchend', function () {
          clicked = false;
      })
          .bind('mousemove touchmove', function (e) {
          if (clicked) {
              var pageX;
              if (e.type == "touchmove") {
                  pageX = window.event.targetTouches[0].pageX;
              } else {
                  pageX = e.pageX;
              }
              widthStep = 20;
              if (Math.abs(currPos - pageX) &gt;= widthStep) {
                  if (currPos - pageX &gt;= widthStep) {
                      currImg++;
                     if (currImg &gt; imageTotal) {
                       currImg = 0;}
                  } else {
                      currImg--;
                      if (currImg &lt; 1) {
                          currImg = imageTotal;
                      }
                  }
                  currPos = pageX;
                  $imgs.eq(lastImg).addClass('notseen');
                  $imgs.eq(currImg).removeClass('notseen');
                  lastImg = currImg;
                  // $obj.html('&lt;img src="' + aImages[options.currImg] + '" /&gt;');
              }
          }
      });
  });
  </code></pre>
  
  <p>Now using this as a basis, I want to simulate the mouse or finger being draged a certain distance once the document is loaded, I wanted to simulate this function to create an automatic rotation. <br>
  <br>
  Now I know I need to use the <code>mousedown/touchstart</code> and <code>mousemove/touchmove</code> functions in this, but from there I'm kind of lost on how to start it and set the simulated distance. Any ideas and help is appreciated.  </p>