JavaScript实现简单的图片切换【静态点击切换】

最新推荐文章于 2023-07-02 10:21:05 发布

LOHAS翀

最新推荐文章于 2023-07-02 10:21:05 发布

阅读量1.4k

点赞数 1

分类专栏：前端笔记文章标签：网页图片切换 JavaScript

本文链接：https://blog.csdn.net/qq_36314461/article/details/100162080

版权

前端笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片切换</title>
		<script type="text/javascript">
		/*调用函数方法*/
			/*定义数组来保存要切换的图片*/
			var imgs = ["img/bird.jpg","img/h5.jpg","img/a.jpg"];
			/*设置变量控制图片循环*/
			var count = 0;
			var changeimg = function(){
				var img = document.getElementById("img");
				img.src=imgs[count++];
				if(count==3) count=0;
			}
		</script>
	</head>
	<body>
		<img src="img/a.jpg" id="img" width="200px" height="200px" onclick="changeimg()"/>
		<!--流方法，不用调用函数【***不需要在img标签中设置onclick属性***】
		<script type="text/javascript">
			var imgs = ["img/bird.jpg","img/h5.jpg","img/a.jpg"];
			var count = 0;
			<!--使用document对象获取img-->
			document.getElementById("img").οnclick=function(){
				this.src=imgs[count++];
				if(count==3){
					count=0;
				}
			}
		</script>
		-->
	</body>
</html>

LOHAS翀

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现简单的图片切换【静态点击切换】

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片切换</title> <script type="text/javascript"> /*调用函数方法*/ /*定义数组来保存要切换的图片*/ var imgs ...
复制链接

扫一扫

专栏目录