【课堂实例】轮播图

【目标】

制作一个有5张图片的轮播图

 

【分析】

想要制作轮播图，需要如下3个步骤：

1、页面打开之后，第一个图片显示，其余的图片，隐藏

2、图片间隔5秒轮播一次

3、传到第5个图后回到第1张

 

【制作】

　　1、页面打开之后，第一个图片显示，其余的图片，隐藏：

　　　　$(“.bg”).not(“:eq(0)”).hide();

 

　　2、间隔5秒轮播：

Var i=0;

$(function(){

$(“.bg”).not(“:eq(0)”).hide();   //不是第一张图片的其余图片都隐藏

setInterval(function(){

       i++;

       $(“.bg”).eq(i).show();           //第i个图片显示

       $(“.bg”).not(“:eq(“+i+”)”).hide();             //不是第i个图片的隐藏

},5000);

})

 

　　3、传到第5个图后回到第1张：

if(i==5)

{

　　i=0;

}

 

【完整程序】

 

Var i=0;

$(function(){

$(“.bg”).not(“:eq(0)”).hide();   //不是第一张图片的其余图片都隐藏

setInterval(function(){

       i++;

if(i==5)

{

　　i=0;

}

       $(“.bg”).eq(i).show();           //第i个图片显示

       $(“.bg”).not(“:eq(“+i+”)”).hide();             //不是第i个图片隐藏

},5000);

})