js实现简单的轮播图效果

最新推荐文章于 2024-04-02 18:03:14 发布

欲游山河

最新推荐文章于 2024-04-02 18:03:14 发布

阅读量493

点赞数 3

分类专栏： JavaStricp

本文链接：https://blog.csdn.net/qq_43554997/article/details/106388850

版权

JavaStricp 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

window.setInterval(code,millisec)按照指定的周期(间隔)来执行函数或代码段。
参数1：code必须。执行的函数名或者执行的代码段
参数2：millisec必须。间隔时间，即周期。单位毫秒。
window对象提供的都是全局函数,调用函数时可将window省略。

第一步：确定事件(onload)并为其绑定一个函数
第二步：编写事件触发函数
第三步：编写定时任务(setInterval)
第四步：编写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.images {
			width: 500px;
			height: 500px;
			margin: auto;
			border: 1px solid red;
		}
	</style>
	<script>
		//页面加载完调用init函数
		window.onload = init;
		function init() {
			//启用定时器
			window.setInterval("changImg()",2000);
		}
		var i = 1;
		function changImg() {
			i++;
			document.getElementById("img").src = "images/"+i+".jpg";
			if(i > 24) {
				i = 0;
			}
		}
	</script>
	<body>
		<div class="images">
			<img src="images/1.jpg" id="img">
		</div>
	</body>
</html>

欲游山河

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现简单的轮播图效果

获取图片的元素对象(document.getElementById(“”))隐藏图片：display：none定时操作：setInterval(“显示图片的函数”，3000);清除定时操作：clearInterval(定时器标识);<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style&
复制链接

扫一扫