360 degree rotating picture small effect

Now, in this network developed era, some e-commerce companies, the need to their own online products to buyers or users to see, in order to let users understand more comprehensive, then a product to display an object to all aspects, it is necessary to apply to 360 degrees rotation picture effects, because the last time a friend asked me to help her get such an effect, Then combined with the resources on the Internet, on the small test sledgehammer, think it is quite fun, the effect can be seen.

First of all, Need to introduce 3deye.min.js files and jq.js in the HTML document, which can be downloaded to free on the Internet, in addition, to show all aspects of the article to do the various angles of the picture, I here is 36 pictures, every 10 degrees a picture, OK, I posted the code, the HTML code is as follows:

<div id= "Demo" class= "box" ></div>

The CSS code is as follows, where the div size should be the same size as the picture:

<style>
. box{width:720px; height:486px; margin:0 auto; cursor:pointer;}
</style>

The most important JS code is as follows:

<script>
$ (document). Ready (function () {

$ ("#demo"). Vc3deye ({
ImagePath: "img/",//Picture path
TOTALIMAGES:36,//Picture count
Imageextension: "JPG"//Picture extension
});

});
</script>

This realization of the effect is every mouse pull once to see the 10-degree angle picture of this item, so that, if the person can see slowly, in addition, if you want it to turn to see, this need to add a timer (HTML and CSS code and the same), There is no introduction of 3deye.min.js files and Jq.js, with the JS timer, the code is as follows:

<script type= "Text/javascript" >
var imgurl = document.getElementById ("IMGULR");
var index = 2;
var roateimg = setinterval (function () {
Imgurl.src= "img/" + index + ". jpg";
Index + +;
if (index >= 37) {
index = 1;
}
}, 200);
</script>

In this way, the automatic 360-degree effect is realized, well, I am also a beginner, wrote here, what problems I hope you can correct me, thank you!

360 degree rotating picture small effect