Javascript编辑可自动循环图像

Javascript edit to loop images automatically

本文关键字：循环 图像 编辑 Javascript      更新时间：2023-09-26

我下载了图片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的。

你能举一个jsfiddle的例子来说明它现在是如何工作的吗。我猜你可以用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);});
相关文章：