研究了 10 个小时还没搞懂，求到底原理是什么

[jacob]

代码挺多，但是只麻烦看一行就好'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
先说功能，6张重叠在一起的图片（a链接中），轮流显示每张图片。
//---------------------
<div id="photos">
<a href="#"><img src="images/a.jpg" alt=""></a>
<a href="#"><img src="images/b.jpg" alt=""></a>
<a href="#"><img src="images/c.jpg" alt=""></a>
<a href="#"><img src="images/d.jpg" alt=""></a>
<a href="#"><img src="images/e.jpg" alt=""></a>
<a href="#"><img src="images/f.jpg" alt=""></a>
</div>
//----------------------
//---------------------
#photos {
width:200px;
height: 200px;
overflow: hidden;
}

#photos a {
position: absolute;
}
//--------------------------
$(document).ready(function() {
rotatePics(1);
});

function rotatePics(currentPhoto) {
var numberOfPhotos = $('#photos a').length;

currentPhoto = currentPhoto % numberOfPhotos;
$('#photos a').eq(currentPhoto).fadeOut(function() {
// re-order the z-index
$('#photos a').each(function(i) {

$(this).css(

'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
);
});

$(this).show();
setTimeout(function() {rotatePics(++currentPhoto);}, 1000);
});
}


请问，z-index属性调整会影响 $(this).show();这行中的this对象吗，因为它是与$('#photos a').eq(currentPhoto).对应的，究竟是怎么做的呢？实在是想不下去了，大脑已经完全混乱了。

[loading]

在代码中添加些addClass，用浏览器的审查元素，一目了然。
z-index你知道是css的吧！

[yayy]

你开个 devtool 自己debuge 一下呗，
其实我是搬运 jsfiddle 来的：

http://jsfiddle.net/Ut3W5/

[yayy]

不过这个样式写的，看的我真累啊。。

[mclxly]

“$(this).show();这行中的this对象吗”，这个this是遍历a元素的object
-----------------------------
程序逻辑:
-----------------------------
1. 页面加载完成后，第一次调用rotatePics();
$(document).ready(function() {
rotatePics(1);
});
2. 根据传入参数currentPhoto，在selector'#photos a'选择的元素组中，隐藏（设置透明）对应位置的元素；
$('#photos a').eq(currentPhoto).fadeOut()
3. 重新设置所有元素的z-index，并显示，下一个元素将设置为最大z-index:5，因此获得显示；
4. 一秒钟后执行步骤2，将下一个元素隐藏；

[FrankFang128]

代码不放在 jsbin/jsfiddler 的，一律不看。

[jacob]

@mclxly 原来是遍历一遍，我原来就是没搞懂this怎么就指向下一张图片了，原来是全显示了，但是$(this).css(

'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
);

这句算法的原理可否说一下，这个计算方式真的不明觉厉。如果自己解决累似问题，怎么能想到这样的公式？我觉得只能数学天才能做到啊

[jacob]

@yayy 我基本把能用的工具，书全用上了，折腾了好几个小时了，实在没辙了，我知道一大陀代码本身就是不受欢迎的。

[menic]

我觉得
因为current是1 base， i是0 base 目的是让与current对应的i的z-index最大
i = current -1，i - current = -1
所以应该是(n+(i-current))%n
比如：
n = 6 current = 3 其实i最大的应该是2 ( 6 + (2 - 3 ) ) % 6 = 5
如果是(6 + (3 - 2)) % 6 = 1 显然不是最大的

[flynngao]

吐槽不能了，不会用chrome么

[kmokidd]

这是个递归 lz说的((numberOfPhotos - i) + currentPhoto) % numberOfPhotos 应该算是递归的公式

线上地址 http://jsfiddle.net/Ut3W5/3/ 我写了一些注释 不知道lz会不会明白

简单来说 currentPhoto不是当前显示的图片而是当前显示图片的上一张图片 显示是用z-index来控制的 这一组图片的z-index是有一个规律：currentPhoto的z-index最小为0，当前显示图片的z-index最大为图片个数-1

lz说公式怎么得到的…… 这个就是高中数列 找规律

[jacob]

@kmokidd 对我帮助太大了，非常感谢.还有一个问题，如何把你脑力copy给我点。。。

[kmokidd]

@jacob 多写点找规律的代码或者题目应该就能写好递归吧= =

[menic]

@kmokidd
@jacob
lz说只看一行 扫了一眼看到rotatePic（1） 以为currentPic是1based 所以搞错了
如果这是教科书里的 真心觉得可以扔了 如果current不是1based 为啥上来就rotatePic(1) 而不是rotatePic(0) 你去看效果 其实第一张出来的图不是第一张 而是第三张 如果想从第一张开始
最开始改成
rotatePic(0)
然后公式改成
(n + (i - current) - 1) % n (如果i==current 让mod最大）
如果他本意就是从第三张开始 可以扔了

[jacob]

@menic

确实是书里的，jquery-novice-to-ninja-new-kicks-and-tricks
这书写的我觉得对我这样初学者很不好，该细致的地方不讲，不该细致的地方啰嗦一堆。