Question

所以这是一个有趣的项目。我在页面上显示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/

Answer 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

});

Tricky Highlight Rotation JQuery - 计时器和选择器

1 个答案: