Question

我创建了一个脚本，我正在滑动一些图像，我知道我已经使用了一些静态的方法，我想让我的脚本通用，无论我说它应该有多少图像，我的脚本如下。这个小提琴在这里适当地动画http://jsfiddle.net/tqnrcfcv/6/

＆＃13;

extern C

＆＃13;

//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);

＆＃13;

*{
  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;
}

＆＃13;

Answer 1

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

简化滑块的jquery脚本

1 个答案: