0

这个脚本有问题，不能让它在最后一张图片之后继续旋转拇指

var cdn_url     = 'http://cdn.domain.com/';
var timers  = new Array;
var images  = new Array;
function changeThumb( id, cdn_url )
{
        document.getElementById(id).src = cdn_url;
}

$(document).ready(function() {
    $("img[id*='tmb_']").mouseover(function(){
        var image_id    = $(this).attr("id");
        var id_split    = image_id.split('_');
        var one    = id_split[1];
        var two    = id_split[2];
        thumbs = 10;

        for ( var i=0; i<=thumbs; i++   ) {
            var image_url = cdn_url + one + '/' + two + '/' + i + '.jpg';
            images[i]     = new Image();
            images[i].src = image_url;
        }
        for ( var i=0; i<=thumbs; i++ ) {
            timers[i] = setTimeout("changeThumb('" + image_id + "','" + cdn_url + one + '/' + two + '/' + i + '.jpg' + "')", i*200);
        }
    }).mouseout(function(){
        var image_id    = $(this).attr("id");
        var id_split    = image_id.split('_');
        var one    = id_split[1];
        var two    = id_split[2];
        var init = id_split[3];
        thumbs = 10;

        for ( var i=0; i<=thumbs; i++ ) {
            if ( typeof timers[i] == "number" ) {
                clearTimeout(timers[i]);
            }
        }
        $(this).attr('src', cdn_url + one + '/' + two + '/' + init + '.jpg');
    });
});

html

<img id="tmb_0613_2913374229_4" class="img"  src="http://cdn.domain.com/thumbs/0613/2913374229/4.jpg" />

拇指在悬停时旋转，但在最后（10.jpg）之后不会从 0.jpg 重新开始

4

1 回答 1

1

尝试这样的事情：

改进包括 - 在加载时编译图像数组一次，使用间隔代替超时，for 循环中图像数组的参考长度，在上次停止的地方启动图像循环（可选，连续 = true）

我运行它以确保没有控制台错误，但我没有你所有的 html 来检查......所以让我知道它是否适合你。

更新的 JS：

var cdn_url = 'http://telus-nezavisnost.com/videos/';
var thumbs  = 5;
var images = [];
var iterator = [];
var continuous = false;
var image_interval;
var init_thumb;

//global functions
var changeThumb = function(id, cdn_url){
    document.getElementById(id).src = cdn_url;
}

var initThumbs = function(selector){
    for ( var i=0; i<thumbs; i++  ) {
        var image_id    = selector.attr("id");
        var id_split    = image_id.split('_');
        var one    = id_split[1];
        var two    = id_split[2];
        var image_url = cdn_url + one + '/' + two + '/' + i + '.jpg';
        var image = new Image();
        image.src = image_url;
        if( images[image_id] === undefined ){
         images[image_id]        = [];
        }
        images[image_id][i]     = image;
    }
}

$(function() {
    $("img[id*='tmb_']").mouseover(function(){
        init_thumb = $(this).attr('src');
        initThumbs($(this));
        var image_id    = $(this).attr("id");
        var image_count = images[image_id].length;

        if( !(iterator.hasOwnProperty(image_id)) || !continuous ){
            iterator[image_id] = 1;
        }

        image_interval = setInterval(function(){
            changeThumb(image_id, images[image_id][iterator[image_id]].src);
            if( iterator[image_id] < ( image_count - 1 ) ){
                iterator[image_id]++;
            }else{
                iterator[image_id] = 1;   
            }
        }, 200);
    }).mouseout(function(){
        var image_id    = $(this).attr("id");
        clearInterval(image_interval);
        if( !continuous ){
            changeThumb(image_id, init_thumb);
        }
    });
});
于 2013-09-07T07:28:37.400 回答