HTML5+CSS+JavaScript基础案例——图片切换
2022/2/22 20:24:44
本文主要是介绍HTML5+CSS+JavaScript基础案例——图片切换,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
案例:
代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #wai{ margin: 50px auto; border:1px solid; width: 200px; height: 300px; background-color: aqua; padding:10px; text-align:center; } </style> </head> <body> <div id="wai"> <p></p> <img src="拼图效果/01.jpg" alt="1"> <button id="prev">上一张</button> <button id="next">下一张</button> </div> <script> var prev=document.getElementById("prev"); var next=document.getElementById("next"); var img=document.getElementsByTagName("img")[0]; var arr=["拼图效果/01.jpg","拼图效果/02.jpg","拼图效果/03.jpg","拼图效果/04.jpg","拼图效果/05.jpg","拼图效果/06.jpg"]; var index=0; var p=document.getElementsByTagName("p")[0]; p.innerHTML="一共"+(arr.length-1)+"张,这是第"+(index+1)+"张" prev.onclick=function(){ index--; if(index<0){ index=arr.length-1; } img.src=arr[index]; p.innerHTML="一共"+(arr.length-1)+"张,这是第"+(index+1)+"张" }; next.onclick=function(){ index++; if(index>arr.length-1){ index=0; } img.src=arr[index]; p.innerHTML="一共"+(arr.length-1)+"张,这是第"+(index+1)+"张" }; </script> </body> </html>
这篇关于HTML5+CSS+JavaScript基础案例——图片切换的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?