用js实现轮播图
案例说明:用js实现在指定位置的图片中,图片每隔3秒会自动换另外一张图片,到了最后一张会自动跳到第一张,从头来过
分析:
第一步:先确定事件(onload())
第二步:把事件绑定一个函数
第三步:在函数里面用写一个按照指定周期实现的函数,
第四步:在指定周期函数里面,获取到指定图片的id,
第五步:修改指定图片的src值
用到的js函数:
用到的js函数:用到的js函数:
onload();某个页面或图像被完成加载
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
实例
Stop interval
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用js实现轮播图</title>
</head>
<body onload="init()">
<img src="D:/img/1.jpg" width="100%" height="100%" id="img1">
</body>
</html>
<script type="text/javascript">
function init(){
setInterval("checimg()",3000);
}
var i=0;
function checimg(){
i++;
var img1 = document.getElementById("img1");
img1.src = "D:/img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
结果会每隔3秒换一次图片,每幅图片显示3秒,到第三幅时,会重新调到第一幅执行