javascript - マウス ホバー時に画像の配列をループする JavaScript を作成するにはどうすればよいですか

Question

次のようなイメージがあります

coolimg.1.jpg

1次の配列でループしたいと思います。

[2,5,8,11,14,17,20,23,26,29]

... mouseover1 秒遅れてオン

どのように始めればよいですか？

Answer 1

これはまだ完全ではありませんが、開始する場所を与えることができます:

var imageRoller=function(){
    this.myNumbers=[2,5,8,11,14,17,20,23,26,29];
    this.currentIndex=0;
    this.timerID=0;
    this.onMouseover=function(){
        //do something
        var currentID="coolimg."+
            this.myNumbers[this.currentIndex]+
            ".jpg";
        //increase the current index
        this.currentIndex++;
        if(this.currentIndex>=
            this.myNumbers.length){
            this.myNumbers=0;
        }
        //do something again in 1 second
        me=this;
        setTimeout(function(){
            me.onMouseover();
        },1000);
    }
    this.onMouseout=function(){
        // stop doing something agqain in 1 second
        clearTimeout(this.timerID);
    }
    //attach the mouseover and out events:
    var me = this;
    document.getElementById("someImg")
        .addEventListener("mouseover", function(){
            me.onMouseover.call(me);
        });

}

Answer 2

このバージョンでは、コードとマークアップの分離が改善されています。

        var coolimg = {
            images      : [2,5,8,11,14,17,20,23,26,29],
            position    : 0,
            mouseOver   : false,
            target      : document.getElementById('coolimg')
        }

        coolimg.target.addEventListener('mouseenter',function(){
            coolimg.mouseOver = true;
        });
        coolimg.target.addEventListener('mouseleave', function(){
            coolimg.mouseOver = false;
        });

        setInterval(function(){
            if (coolimg.mouseOver) {
                coolimg.position = (coolimg.position+1)%coolimg.images.length;
                coolimg.target.src = 'coolimg.'+coolimg.images[coolimg.position]+'.jpg';
            }
        }, 1000);

Answer 3

var imgs  = [2,5,8,11,14,17,20,23,26,29]
  , last  = imgs.length
  , count = 0
  , timer
  , img_name
;//var

function cycleImage(){
  if(count++ < last){
    img_name = 'coolimg.' + imgs[count] + '.jpg';
    // do something with image
    timer = setTimeout(changeImage, 1000);
  }
}

function resetImage(){
  count = 0;
  clearTimeout(timer);
}

var $element = $('element');

$element
  .on ('mouseover', cycleImage)
  .off('mouseout' , resetImage)
;//var