今天来介绍一下我前两天写一个小任务的时候遇到的一些问题，如果能够有所帮助或者启发，那将是我的荣幸。
<div class="banner">
<a class="" href="#" target="_blank"><img src="images/newpic.gif"></a>
<a class="" href="#" target="_blank"><img src="images/1.jpg"></a>
<a class="" href="#" target="_blank"><img src="images/newpic.gif"></a>
<a class="" href="#" target="_blank"><img src="images/1.jpg"></a>
<a class="" href="#" target="_blank"><img src="images/newpic.gif"></a>
</div>
要实现的功能是banner图的轮播
大致思路如下：
1. 将这些图片存放在一个数组里，然后把第一个图片显示出来，其他的隐藏。
2. 定义一个函数，用来显示下一张图片，即本张图片隐藏，下张图片显示。如果是最后一张，本张隐藏，第一张显示，这样实现循环播放。
3. 每隔一段时间调用一次这个函数。
$(function () {
var pics = $(".banner a img");
var len = pics.length;
pics.eq(0).show();
for (var i = 1; i < len; i++) {
pics.eq(i).hide();
}
function turn(){
if (i < 5) {
if (pics.eq(i).not('hidden')) {
pics.eq(i).hide();
pics.eq(i + 1).show();
}
i++;
}
if (i == 5) {
pics.eq(5).hide();
pics.eq(0).show();
i = 0;
}
}
i = 0;
setInterval(turn, 2000);
});
这里边有几个知识点需要总结一下：
1. 选择数组中某个元素，使用 arr.eq(i) 的方式，其中 i 为索引。
2. 判断元素是否显示，使用 not 选择器，可直接用于元素上，pics.eq(i).not('hidden') 就是选择 pics 数组中索引值为 i 且没有隐藏的元素。
3. 在这里没有在 turn 函数里使用 for 循环来操作是因为每隔一段时间 turn 函数都要执行一次，而 turn 函数每执行一次实际上只需要改变一张图片，如果使用 for 循环的话，每次执行 turn 函数都要执行一次 for 循环，都要遍历所有的元素，并且很容易造成混乱，不容易形成思路。
4. 在这里通过最下边 i = 0; 在第一次执行之前将 i 置零，意思是从第一张图片开始，每次操作完之后，i++，直到最后一张图片的时候，再次将 i 置零，循环重新开始。
5. setInterval(turn,2000); 第一个参数是函数名称，不需要写括号，也不要加引号，第二个参数是间隔时间，这里应该是2000毫秒，也就是2秒，可以根据实际需要设定。
知识的积累是一个漫长的过程，实践和经验也需要时间来沉淀。