Javascript编辑自动循环图像

Question

我下载了图片 360 旋转，效果很好。目前，它使用鼠标来旋转图像，从而进行 360 度旋转。来源链接https://code.google.com/p/picture-360-rotation/

我希望无需鼠标即可自动启动 360 度旋转。但我仍然希望鼠标能够旋转图像。

如何让脚本缓慢旋转？

JS:

var start = false;

(function($) {
$.fn.pic360 = function() {
var first_img = this.find('img:first');
var all_img = this.find('img');
var img_count = all_img.length;
if(img_count==0) return;
var img_width = first_img.width();
var chg_width = parseInt(img_width/img_count);/* 感应区宽度*/
var div_left = this.position().left;
var imgs_left = first_img.offset().left;
this.toggle();
all_img.toggle();
first_img.toggle();
this.width(img_width);/* 设置容器宽度 */
this.height(first_img.height());/* 设置容器高度 */
var mouseX = 0;
var step = 0;
var curr_step = 0;/* 当前感应区 */
var curr_img = 0;/* 当前图片 */

this.mousedown(function(e){/*鼠标移到本DIV*/
    start = true;
    if(start){
        mouseX = e.screenX;
        /* 获取当前感应区 */
        curr_step=parseInt((mouseX-imgs_left)/chg_width);
        step = curr_step;
    }

})
this.mousemove(function(e){
    if(start){
        curr_step=parseInt((e.screenX-imgs_left)/chg_width);
        if(curr_step!=step){
            $(all_img[curr_img]).toggle();/* 隐藏当前图片 */
            if(curr_step>step){
                curr_img = curr_img+1;
                if(curr_img>=img_count) curr_img=0;
            }else{
                curr_img = curr_img-1;
                if(curr_img<0) curr_img=img_count-1;
            }               
            $(all_img[curr_img]).toggle();
            step=curr_step;
        }
    }
    return false;
})
this.mouseup(function(e){/*鼠标移出本DIV*/
    start = false;
})

return this;
};
})(jQuery);
/**
* 初始化所有Pic360对象
*/

$(document).ready(function(){
$(".PIC360").pic360().show();
$("body").mousemove(function(e){
    start = false;
})
})

div class="PIC360"和图像是 img 的。

Answer 1

你能做一个 jsfiddle 的例子来说明它现在是如何工作的吗？Atm 我猜你可以使用 setInterval 让它自动旋转

var curr_img = 0;
var loopTimer = setInterval( function() {
    if (curr_img > (all_img.length - 1) ) {curr_img = 0;}
    curr_img++:
    $(all_img[curr_img]).toggle();
}, 200);

/* stop when mouse is pressed */
this.mousedown(function(e){ clearInterval(loopTimer);});