devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript的学习之图片的切换_网页图片切换

作者：知新_RL | 2024-07-02 03:16:27

赞

踩

网页图片切换

目录

一、寻找素材

 二、编写简单的静态html页面

代码示例

效果展示

三、JS功能的实现 

JS代码

完整代码

效果展示

一、寻找素材

随便去网上找几张图片素材

 二、编写简单的静态html页面

代码示例

  1. <!doctype html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<title></title>
  7. 	</head>
  8.  
  9. 	<body>
  10. 		<style>
  11. 			* {
  12. 				margin: 0;
  13. 				padding: 0;
  14. 			}
  15.  
  16. 			#box {
  17. 				width: 500px;
  18. 				margin: 50px auto;
  19. 				padding: 10px;
  20. 				background-color: greenyellow;
  21. 				/* 设置文本居中 */
  22. 				text-align: center;
  23. 			}
  24. 		</style>
  25. 		<script type="text/javascript">
  26. 			// 带年纪按钮切换图片
  27. 		</script>
  28. 		<div id="box">
  29. 			<img src="img/1.jpg" alt="猫咪" />
  30. 			<button id="prev">上一张</button>
  31. 			<button id="next">下一张</button>
  32. 		</div>
  33. 	</body>
  34.  
  35. </html>

效果展示

三、JS功能的实现 

 添加JS代码，让它实现图片切换的功能

JS代码

  1. <script type="text/javascript">
  2. 	// 带年纪按钮切换图片
  3. 	window.onload = function() {
  4. 		var prev = document.getElementById('prev');
  5. 		var next = document.getElementById('next');
  6. 		// 要想切换图片就要修改img标签的src属性
  7. 		var imgs = ['img/1.jpg','img/2.jpg','img/3.jpg',];
  8. 		var index = 0;
  9. 		var info = document.getElementById('info');
  10. 		info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';
  11. 		prev.onclick = function(){
  12. 			var img = document.getElementsByTagName('img')[0];
  13. 			index--;
  14. 			// 判断索引是否超出图片数范围
  15. 			if(index<0){
  16. 				index = imgs.length-1;
  17. 			};
  18. 			img.src = imgs[index];
  19. 			info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';
  20. 		};
  21. 		next.onclick = function(){
  22. 			var img = document.getElementsByTagName('img')[0];
  23. 			index++;
  24. 			if(index>imgs.length-1){
  25. 				index = 0;
  26. 			};
  27. 			img.src = imgs[index];
  28. 			info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';
  29. 		};
  30. 	};
  31. </script>

完整代码

  1. <!doctype html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<title></title>
  7. 	</head>
  8.  
  9. 	<body>
  10. 		<style>
  11. 			* {
  12. 				margin: 0;
  13. 				padding: 0;
  14. 			}
  15.  
  16. 			#box {
  17. 				width: 500px;
  18. 				margin: 50px auto;
  19. 				padding: 10px;
  20. 				background-color: greenyellow;
  21. 				/* 设置文本居中 */
  22. 				text-align: center;
  23. 			}
  24. 			#img{
  25. 				width: 400px;
  26. 				height: 350px;
  27. 			}
  28. 		</style>
  29. <script type="text/javascript">
  30. 	// 带年纪按钮切换图片
  31. 	window.onload = function() {
  32. 		var prev = document.getElementById('prev');
  33. 		var next = document.getElementById('next');
  34. 		// 要想切换图片就要修改img标签的src属性
  35. 		var imgs = ['img/1.jpg','img/2.jpg','img/3.jpg',];
  36. 		var index = 0;
  37. 		var info = document.getElementById('info');
  38. 		info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';
  39. 		prev.onclick = function(){
  40. 			var img = document.getElementsByTagName('img')[0];
  41. 			index--;
  42. 			// 判断索引是否超出图片数范围
  43. 			if(index<0){
  44. 				index = imgs.length-1;
  45. 			};
  46. 			img.src = imgs[index];
  47. 			info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';
  48. 		};
  49. 		next.onclick = function(){
  50. 			var img = document.getElementsByTagName('img')[0];
  51. 			index++;
  52. 			if(index>imgs.length-1){
  53. 				index = 0;
  54. 			};
  55. 			img.src = imgs[index];
  56. 			info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';
  57. 		};
  58. 	};
  59. </script>
  60. 		<div id="box">
  61. 			<p id="info"></p>
  62. 			<img id="img" src="img/1.jpg" alt="猫咪" />
  63. 			<div>
  64. 				<button id="prev">上一张</button>
  65. 				<button id="next">下一张</button>
  66. 			</div>
  67.  
  68. 		</div>
  69. 	</body>
  70.  
  71. </html>

效果展示

点击按钮可以切换上一张和下一张 

这节的JS图片切换的学习就告一段落！！！

上节学习内容链接：

JavaScript的学习之dom的查询（一） 

感谢各位关注，一起加油！！！！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/778437
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。