0

ですから、これは楽しいプロジェクトでした。ページに 4 つのサムネイル画像が表示されています。数秒ごとに、これらのサムネイルの 1 つが強調表示されます。(ハイライトは、灰色の背景を持つ新しい画像が通常の親指の上に表示されることを意味します) マウスをホバーすると、タイマーを一時停止する必要があります。私は私が近くにいることを知っています！ページの読み込み時に、最初の画像は自動ハイライトされますが、他の画像は自動ハイライトされません。JS は次のとおりです。

    $(function() { // Shorthand for $(document).ready(function() {
        function nextImage() {
        var next = $('div.activeThumb.currentHighlight').
              removeClass('currentHighlight'). // Unhighlight old one
              next('div.activeThumb'); // Find next one
        if (next.length == 0) { // Cycle back to the first
              next = $('div.activeThumb:first');                  
        } 
        next.addClass('currentHighlight'); // Highlight new one                     
   }
   var timer = null;
   $('a.aThumb').hover(function() {
        clearInterval(timer); // Stop on hover
        $('div.activeThumb.currentHighlight').
              removeClass('currentHighlight');//Remove whatever the current auto                highlight is. :)
  }, function() {
        setInterval(nextImage, 2000); //Restart on exit 
  });
  nextImage(); // Highlight first image 
  setInterval(nextImage, 2000); // Start cycle
  });

必要に応じて、html と css を含むテスト ページをチェックアウトできます。設定としてはちょっと変です。 http://cartercallahan.com/TestSite/javaSlider2/

4

1 に答える 1

1

次の方法は、期待どおりではありません。私はあなたのためにうまくいくはずのインデックスベースのアプローチを持っています。jsfiddle の例: http://jsfiddle.net/lucuma/pm6fA/5/

インデックスを設定し、サムネイルの配列を移動するときにそのインデックスをインクリメントできます。

var activeClass = 'currentHighlight';
var timer;
var $thumbs;
var index = 0;

function nextImage() {   
      $thumbs.eq(index).removeClass(activeClass);
      index = (index+1) % $thumbs.length;
      $thumbs.eq(index).addClass(activeClass);      
  }

$(function() { 

    $('a.aThumb').hover(function() {
        clearInterval(timer); // Stop on hover
        $('div.activeThumb.currentHighlight').
            removeClass('currentHighlight');
  }, function() {
        timer = setInterval("nextImage()", 2000); //Restart on exit 
  });


    $thumbs = $('div.activeThumb');
    $thumbs.eq(index).addClass('currentHighlight');
    timer= setInterval("nextImage()", 2000); // Start cycle

});​
于 2012-05-19T03:36:52.080 に答える