如何实现一个简单轮播图效果,通过点击切换图片?在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>
感谢你的观看~