使用javascript实现图片轮播效果
使用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>
