你的位置:首页 > Java教程

[Java教程]首页banner焦点图自动轮播效果


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

<div >

        <a href="#" target="_blank"><img src="images/newpic.gif"></a>
        <a href="#" target="_blank"><img src="images/1.jpg"></a>
        <a href="#" target="_blank"><img src="images/newpic.gif"></a>
        <a href="#" target="_blank"><img src="images/1.jpg"></a>
        <a 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秒,可以根据实际需要设定。

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