使用javascript实现图片轮播效果

图片轮播效果是前端开发中比较常见的一个功能，现在我们来简单分析一下实现思路

第一步：在html代码要实现轮播的html标签中添加id属性以便使用javascript时能快找到这个标签，例如：

<img id="img1" src="../img/1.jpg" width="100%">

第二步：分析图片轮播效果是什么事件，据分析，应该是onload事件

第三部：编写函数

var i = 1;

function changeImg(){
        //获取图片的标签，然后改变标签的属性
        var img1 = document.getElementByIDd("img1");
         //i == 3,即实现3张图片的轮播
        if(i == 3)
        {
            i = 1;
        }else{
            i++;
        }
        img1.src = "../img/"+i+".jpg";
}

function init(){
        //设置定时，每过5秒执行一次changeImg函数
        setInterval("changeImg()",5000);
}

第四步：添加事件，例如：

//body标签一经加载，函数即可运行
    <body onload="init()">

    </body>