Question

我收到了以下代码：

window.setInterval(function(){
    var id = $('.slidermenu.currentone').attr('data-id');
    var newid = parseInt(id) + 1;
    //alert(newid + ' - ' + id);

    $('.slidermenu.currentone').animate({backgroundColor: 'white'}, 'slow');
    $('.slidermenu.currentone').removeClass("currentone");
    $('slidermenu[date-id='+newid+']').animate({backgroundColor: '#f3f3f3'}, 'slow');
    $('slidermenu[date-id='+newid+']').addClass("currentone");
    $('#activeimage img.currentone').fadeOut('slow');
    $('#activeimage img.currentone').removeClass("currentone");
    $('#activeimage img[data-id='+newid+']').fadeIn('slow');
    $('#activeimage img[data-id='+newid+']').addClass("currentone");
}, 3000);

我正在尝试制作一个每3秒钟运行一次的功能，然后让我的滑块显示下一张图像。好吧，它第一次运行时效果很好。但第二次，它只是不起作用。

我认为问题可能在于var newid的数量来自id，加上1。

另外，我实际上需要它才能达到5号，然后再次降到1号。

Answer 1

看起来你错过了。将新滑块菜单设置为当前选项时的选择器。试试这个：

$('.slidermenu[date-id='+newid+']').animate({backgroundColor: '#f3f3f3'}, 'slow');
$('.slidermenu[date-id='+newid+']').addClass("currentone");

Answer 2

要增加id，需要在增量函数之外创建id变量，然后在每次调用interval函数时递增它。你可以从一个闭包中获取它，而不是全局的，这通常是首选。

// make an anonymous function which reads the id attr and stores it in the id var.
var intervalFunction = (function(){
var id = $('.slidermenu.currentone').attr('data-id')
  , id = parseInt(id);

// return a function which will be run after every 3s and will increment the id
return function(){
  console.log(id++);
  // your slider code here
}})();

window.setInterval(intervalFunction, 1000);

Answer 3

问题是每次你的间隔函数运行时，它都会将data-id的值加1，而不会改变。由于您希望遍历5个值，因此需要将增量存储在区间函数之外的单独值中 - 使用以下代码中的闭包：

window.setInterval(function() {
  var inc = 0;
  return function() {
    inc = 1 + inc % 5;
    var id = $('.slidermenu.currentone').attr('data-id');
    var newid = parseInt(id) + inc;
    alert(inc);
    // slider code
  }
}(), 3000);

增加var作为数字

3 个答案: