2018-06-04
使用JS完成首页轮播图效果
一、技术分析
获取元素： document.getElementById(“id 名称”)
事件(onload) ：页面加载事件
定时操作：setInterval(“changeImg()”,3000);
二、步骤分析
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
扫描二维码关注公众号，回复：
1450083 查看本文章
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性) [在循环的时候需要注意到了最后一 张图片的时候要重置。]
三、代码实现
JS 代码：
<script>
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
} //书写函数
var i=0；
function changeImg(){
i++; //获取图片位置并设置src属性值
document.getElementById("img1").src="../img/small0"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
HTML代码：
<body onload="init()">
在指定位置定义 id。