首页banner焦点图自动轮播效果

今天来介绍一下我前两天写一个小任务的时候遇到的一些问题，如果能够有所帮助或者启发，那将是我的荣幸。

<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秒，可以根据实际需要设定。

知识的积累是一个漫长的过程，实践和经验也需要时间来沉淀。