360 demo

HTML

<!-- for demo only -->
<base href="http://i201.photobucket.com/albums/aa236/Mottie1/demo/360%20demo/">
<!-- follow this template -->
<center>
    <div class="product" style="width: 640px; height: 480px; overflow: hidden; border: #333 1px solid;">
        <img src="01_zps6026bc1c.jpg" />
        <img src="02_zpsa2d4d4f5.jpg" alt="test" />
        <img src="03_zps2205d88d.jpg" />
        <img src="04_zps018519f3.jpg" />
        <img src="05_zps1af853bb.jpg" />
        <img src="06_zps1b7fa643.jpg" />
        <img src="07_zps2932dce8.jpg" />
        <img src="08_zps4f163adc.jpg" />
        <img src="09_zps37e50d59.jpg" />
        <img src="10_zps1014ea20.jpg" />
        <img src="11_zpsc8c384eb.jpg" />
        <img src="12_zps0b8b7b54.jpg" />
        <img src="13_zpsde64b7b5.jpg" />
        <img src="14_zps22185eaa.jpg" />
        <img src="15_zps96203c65.jpg" />
        <img src="16_zps5d55dfcf.jpg" />
        <img src="17_zps10a047fd.jpg" />
        <img src="18_zps96a4a721.jpg" />
        <img src="19_zps9d98717d.jpg" />
        <img src="20_zps9eaaf938.jpg" />
        <img src="21_zps609a0f29.jpg" />
        <img src="22_zps1663095a.jpg" />
        <img src="23_zps6f257c59.jpg" />
        <img src="24_zps94d1fa90.jpg" />
        <img src="25_zps0dca1ee4.jpg" />
        <img src="26_zps985ad881.jpg" />
        <img src="27_zps62a2884e.jpg" />
        <img src="28_zps4a71227d.jpg" />
        <img src="29_zps77046c66.jpg" />
        <img src="30_zps982d896e.jpg" />
        <img src="31_zpsf2303a27.jpg" />
        <img src="32_zpsd51d1a80.jpg" />
        <img src="33_zps8027e745.jpg" />
        <img src="34_zps934b7557.jpg" />
        <img src="35_zpsb31c3095.jpg" />
        <img src="36_zps3e3b5a39.jpg" />
    </div>
</center>

CSS

.notseen {
     position: absolute;
     left: 0;
     top: 0;
     visibility: hidden;
 }

JavaScript

(function ($, window, document, undefined) {
    $.fn.j360 = function () {
        "use strict";
        var $product = this,
            $imgs = $product.find('img'),
            imageTotal = $imgs.length - 1,
            clicked = false,
            widthStep = 4,
            currPos,
            currImg = 0,
            lastImg = 0;
        

        $imgs.bind('mousedown', function (e) {
            e.preventDefault(); // prevent dragging images
        });

        $imgs.filter(':gt(0)').addClass('notseen');


        $product.bind('mousedown touchstart', function (e) {
            console.log('MouseDown');
            if (e.type === "touchstart") {
                currPos = window.event.touches[0].pageX;
            } else {
                currPos = e.pageX;
            }
            clicked = true;
            return false;
            
        });


        $product.bind('mouseup touchend', function () {
            clicked = false;
            console.log('MouseUp');
        });


        $product.bind('mousemove touchmove', function (e) {
            console.log('MouseMove');
            if (clicked) {
                var pageX;
                if (e.type == "touchmove") {
                    pageX = window.event.targetTouches[0].pageX;
                } else {
                    pageX = e.pageX;
                }
                widthStep = 4;
                if (Math.abs(currPos - pageX) >= widthStep) {
                    if (currPos - pageX >= widthStep) {
                        currImg++;
                        if (currImg > imageTotal) {
                            currImg = 1;
                        }
                    } else {
                        currImg--;
                        if (currImg < 1) {
                            currImg = imageTotal;
                        }
                    }
                    currPos = pageX;
                    $imgs.eq(lastImg).addClass('notseen');
                   ...