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完成首页轮播图效果
原文地址：https://www.cnblogs.com/sunNoI/p/9132660.html