Question

我用jQuery和CSS创建了这个简单的滑块。

var ticker = 0;
var domElement = $('.ticker__item');

window.setInterval(function() {
  ticker = ticker + 1;
  $(domElement).removeClass('active');
  //  console.log(ticker);

  if (ticker == 1) {
    $('.div-1').addClass('active');
  }
  if (ticker == 2) {
    $('.div-2').addClass('active');

  }
  if (ticker == 3) {
    $('.div-3').addClass('active');
    ticker = 0;
  }
}, 2000);

.ticker__item {
  color: #fff;
  padding: 10px;
  position: absolute; 
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.div-1 {
  background: pink;
}
.div-2 {
  background: green;
}
.div-3 {
  background: brown;
}
.active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="ticker">
  <div class="ticker__item div-1">Hello world 1</div>
  <div class="ticker__item div-2">Hello world 2</div>
  <div class="ticker__item div-3">Hello world 3</div>
</div>

我想知道是否可以制作简单的幻灯片。当我的用户在手机上时，运行此代码是否可以，并且他们已滚动传递这些div。是否会使他们的设备变硬并耗尽电池？

我只想制作漂亮，简单的代码。请查看我的代码并告诉我是否可以以更加友好的方式进行： - ）

Answer 1

你可以使用模数学，只需连接自动收报机变量：

window.setInterval(
function () {
    domElement.removeClass('active');
    $('.div-' + (++ticker)).addClass('active');
    ticker = ticker % 3
}, 2000);

Answer 2

由于您正在寻找性能，因此您应该尝试使用唯一的选择器。

$(domElement).removeClass('active');这将循环并从所有div中删除类，但只有1个div具有必要的类，因此您的n-1次迭代将无效。

相反，请尝试$('.ticker__item.active');。

此外，拥有一个计数变量和div-1 ... div-3看起来像一个开销。您可以只使用泛型类并检查下一个兄弟并为其添加类。如果你没有下一个兄弟，请跳到第一个兄弟姐妹，然后重新开始这个过程。

这将删除对计数器变量（ticker）的任何依赖性，并删除1个不需要的全局变量。这也使您的功能通用，如果您想添加更多的自动收报机，您只需添加有效的标记。

＆＃13;

window.setInterval(function() {
  var nextDiv = $('.ticker__item.active')
    .removeClass('active')
    .next('.ticker__item');
  var firstDiv = $('.ticker__item:first');
  (nextDiv.length ? nextDiv : firstDiv).addClass('active'); 
}, 2000);

＆＃13;

.ticker__item {
  color: #fff;
  padding: 10px;
  position: absolute; 
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.div-1 {
  background: pink;
}
.div-2 {
  background: green;
}
.div-3 {
  background: brown;
}
.active {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="ticker">
  <div class="ticker__item div-1">Hello world 1</div>
  <div class="ticker__item div-2">Hello world 2</div>
  <div class="ticker__item div-3">Hello world 3</div>
</div>

＆＃13;

是否有可能优化我的setInterval函数？

2 个答案: