0

所以这是一个有趣的项目。我在一个页面上显示了 4 个缩略图。每隔几秒钟，应突出显示这些缩略图中的一个。（高亮表示带有灰色背景的新图像在普通拇指上可见）鼠标悬停时，我需要暂停计时器。我知道我很接近！在页面加载时，第一张图像确实会自动突出显示，但其他图像永远不会自动突出显示。这是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 回答