jquery - 简化滑块的jquery脚本

我创建了一个脚本，可以在其中滑动几张图像
，我知道我已经使用某种静态方法使脚本通用，无论我放置多少图像都可以使用，脚本如下。这个小提琴在这里正确地设置动画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>

最佳答案

您可以使用map函数动态地执行此操作。因此，您基本上会将所有图像放入一个数组中，遍历每个图像并为其提供索引，然后遍历它们并检查条件。

关于jquery - 简化滑块的jquery脚本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46987045/