jquery - 简化 slider 的 jquery 脚本

Question

我创建了一个脚本，我在其中滑动了一些图像，我知道我使用了一些静态方法我想让我的脚本通用，无论我放多少图像它都应该工作，我的脚本如下。这个 fiddle 在这里正确地动画http://jsfiddle.net/tqnrcfcv/6/

//Create a var to store the index of red element
var count = -1;
var count2 = 0;
var count3 = 1;
function active() {
  var img = $('div');
  var imgLength = img.length - 1;
  //Check if the actual item isn't more than the length then add 1 otherway restart to 0
  count < imgLength ? count++ : count=0;
  count2 < imgLength ? count2++ : count2=0;
  count3 < imgLength ? count3++ : count3=0;
  
  //Remove the class and add it to the new target
  img.eq(count).css({left:0, transform:'scale(1)', 'z-index':100});
  img.eq(count2).css({left:'60px', transform:'scale(.8)', 'z-index':50});
  img.eq(count3).css({left:'120px', transform:'scale(.6)', 'z-index':1});
}
setInterval(active, 1000);

*{
  transition: all .3s ease;
}
.a,.b,.c{
  width:100px;
  height:100px;
  position:absolute;
  bottom:50px;
  left:0;
  box-shadow:0 0 5px rgba(0,0,0,.5);
  background:#f00;
  transform-origin:50% 100%;
  z-index:100;
}
.b{
  left:60px;
  transform:scale(.8);
  background:grey;
  z-index:50;
}
.c{
  left:120px;
  transform:scale(.6);
  background:yellow;
  z-index:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="a">
</div>
<div class="b">
</div>
<div class="c">
</div>

Answer 1

您可以使用 map功能来动态地做到这一点。因此，您基本上会将所有图像放入一个数组中，遍历每个图像并为它们提供索引，然后遍历它们并检查条件。