js案例——轮播图实现(一)

最新推荐文章于 2023-08-07 16:12:45 发布

**铧**

最新推荐文章于 2023-08-07 16:12:45 发布

阅读量382

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_44342683/article/details/105660710

版权

大家浏览网站的时候可以看到网站首页一般都有轮播图，所谓轮播图就是页面上的图片每隔一定的时间就会换下一张，轮播图的实现也非常简单，这里废话不多说，直接上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img src="img/p1.PNG" id="img" width="100%" height="200px">
<script type="text/javascript">
var i=1;
function show() {
	i++;
	if(i>3)
	i=1;
	//修改图片路径
	var s=document.getElementById("img");
	s.src="img/p"+i+".PNG";
}
//三秒换图片
setInterval("show()", 3000);
</script>
</body>
</html>

在这里插入图片描述
以上就是js实现简单轮播图的方法，但是要注意，我们常见的轮播图一般都不用这种方法实现，而是用另一种方法实现，这里我们了解轮播图实现原理即可，另一种方法有时间我再发出来。

**铧**

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js案例——轮播图实现(一)

大家浏览网站的时候可以看到网站首页一般都有轮播图，所谓轮播图就是页面上的图片每隔一定的时间就会换下一张，轮播图的实现也非常简单，这里废话不多说，直接上代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>轮播图</title></head>...
复制链接

扫一扫