JavaScript简单点击切换效果—

JavaScript简单点击切换效果——轮播图

article/2025/9/23 11:33:54

如何实现一个简单轮播图效果，通过点击切换图片？在JavaScript内容的实现是使用点击触发事件，改变src图片路径。

直接展示JS代码哈！

// 创建一个数组来保存图片的路径var imgArr = ["img/001.jpg", "img/002.jpg", "img/003.jpg", "img/004.jpg"];var imgs = document.getElementById("imgs");// 获取按钮对象// 获取元素function getId(ids) {return document.getElementById(ids);}function getOnClick(getIds, i) {getIds.onclick = function () {imgs.src = imgArr[i];}}getOnClick(getId("one"), 0)getOnClick(getId("two"), 1)getOnClick(getId("three"), 2)getOnClick(getId("four"), 3)

以下是大致的效果图>>>

下面是我的HTML布局和css样式，还可以继续美化得更好看哦~

<body><div class="enclosure"><div class="picture"><img src="img/001.jpg" alt="" id="imgs" draggable="false"><div class="handoffBox"><div class="handoff" id="one"><img src="img/001.jpg" alt="" width="77px" height="57px" draggable="false"></div><div class="handoff" id="two"><img src="img/002.jpg" alt="" width="77px" height="57px" draggable="false"></div><div class="handoff" id="three"><img src="img/003.jpg" alt="" width="77px" height="57px" draggable="false"></div><div class="handoff" id="four"><img src="img/004.jpg" alt="" width="77px" height="57px" draggable="false"></div></div></div></div>
</body>

<style>body {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;}.enclosure {width: 660px;height: 420px;background: #f0a77d;border-radius: 30px;box-shadow: 0px 0px 10px 5px #f0a77d;}.picture {margin-left: 43px;margin-top: 56px;}img {position: absolute;box-shadow: 0px 0px 10px 5px #ded062;}.handoffBox {position: relative;}.handoff {width: 80px;height: 60px;background: #8dcb63;float: left;margin-top: 230px;margin-left: 20px;display: flex;justify-content: center;align-items: center;}
</style>

感谢你的观看~