第一阶段：前端开发_使用JS完成首页轮播图效果
Posted sunNoI
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第一阶段：前端开发_使用JS完成首页轮播图效果相关的知识，希望对你有一定的参考价值。
2018-06-04
使用JS完成首页轮播图效果
一、技术分析
获取元素： document.getElementById(“id 名称”)
事件(onload) ：页面加载事件
定时操作：setInterval(“changeImg()”,3000);
二、步骤分析
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 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。
以上是关于第一阶段：前端开发_使用JS完成首页轮播图效果的主要内容，如果未能解决你的问题，请参考以下文章
阶段一-02.分类，推荐，搜索，评价，购物车开发-第1章 首页轮播图+分类功能实现-1-1 实现电商首页轮播图功能
阶段一-02.分类，推荐，搜索，评价，购物车开发-第1章 首页轮播图+分类功能实现-1-3 分类实现 - 加载与渲染大分类