JavaScript项目实战 轮播图(手动切图)
2021/11/20 11:12:54
本文主要是介绍JavaScript项目实战 轮播图(手动切图),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
- imgarray是存储图片名的数组,大家把这个改成自己的图片名称就好
- querySelector函数获取img元素,可用getElementByID代替
效果演示 轮播图(手动切图)
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>轮播图</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> <style> .box { width: 900px; height: 700px; margin: 100px auto; background-color: #000; position: relative; } #left, #right { font-family: 'icomoon'; width: 50px; height: 50px; border-radius: 50%; background-color: rgb(82, 87, 81, .5); position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; color: white; text-align: center; line-height: 50px; cursor: pointer; } #left{ left: 20px; } #right{ right: 20px; } </style> </head> <body> <div class="box"> <img src="" alt="" width="100%" height="100%"> <div id="left"></div> <div id="right"></div> </div> <script> window.onload = function () { var i = 1; var imgarray = ['0.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg']; var img = document.querySelector(".box img"); img.src = imgarray[0]; var left=document.getElementById("left"); var right=document.getElementById('right'); console.log(left); left.onclick=function(){ i--; if (i< 0) { i=imgarray.length-1; } img.src = imgarray[i]; } right.onclick = function () { i++; if (i >= imgarray.length) { i = 0; } img.src = imgarray[i]; } } </script> </body>
JavaScript实战项目 轮播图(自动切图)
这篇关于JavaScript项目实战 轮播图(手动切图)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?