Here's an example using the jQuery Three Sixty plugin. You can find the complete source on Github.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<th>
Mouse Click
</th>
<th>
Mouse Move
</th>
<th>
Automatic
</th>
</tr>
<tr>
<td>
<img alt="" src="" id="product1" />
</td>
<td>
<img alt="" src="" id="product2" />
</td>
<td>
<img alt="" src="" id="product3" />
</td>
</tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/matdumsa/jQuery.threesixty/master/jquery.threesixty.js"></script>
<script type="text/javascript">
var arr = new Array();
for (var i = 1; i <= 25; i++) {
arr.push("https://www.mathieusavard.info/threesixty/" + i + ".jpg");
};
$(function () {
$("#product1, #product2, #product3").attr("src", arr[0]);
$("#product1").threesixty({ images: arr,
method: 'click',
direction: 'forward',
sensibility: 1
});
$("#product2").threesixty({ images: arr,
method: 'mousemove',
direction: 'forward',
sensibility: 1
});
$("#product3").threesixty({ images: arr,
method: 'auto',
direction: 'forward',
sensibility: 1,
autoscrollspeed: 100
});
});
</script>
</body>
</html>
Demo
