sample: jQuery slideshow

by sii_side

HTML

<div id="animateField">
  <img alt="1">
</div>

JavaScript

$(function() {
  //関数の外からでもアクセスできるよう、外に出す
  var count;
  var i = 1;

  //何回もアクセスする要素なので、先に参照しておく
  var $img = $('#animateField img');

  $img.hover(function() {
    count = setInterval(changeImg, 1000);
  }, function() {
    clearInterval(count);   //タイマー解除
    $img.attr("alt", "1");  //元に戻す（不要なら削除）
    i = 1;                  //　　〃
  });

  function changeImg() {
    $img.attr("alt", "i = " + i); //テストなのでaltに
    if (i <= 5) {
      i++;
    } else {
      i = 1;
    }
  }
});