本文记录了使用JavaScript实现图片轮流展示的方法。分为代码部分(html、JavaScript、css)和效果展示部分。
HTML包括一个图片展示区域和两个按钮,两个按钮分别表示上一张图片和下一张。img没有在html预先指定src值,功能在js里面实现,这样修改的时候可以只修改js。
<div id="imageDiv">
<button id="previous"><</button>
<img />
<button id="next">></button>
</div>
JavaScript部分,这里首先从dom里取一些值方便使用,再指定自增变量i、图片列表imgList、图片数NUM、图片路径PATH。之后执行语句将img初始化,展示第一张图片。接下来的两个函数分别绑定两个按钮的onclick属性,实现点击按钮切换图片。
<script>
var prev = document.getElementById('previous');
var next = document.getElementById('next');
var imgTag = document.getElementsByTagName('img')[0];
var i = 0;
const imgList = ['slash.png','dodge.png','peach.png'];
const NUM = imgList.length;
const PATH = 'resource/';
imgTag.src = PATH + imgList[0];
prev.onclick = function(){
--i;
while(i<0)i+=NUM;
imgTag.src= PATH + imgList[i%NUM];
}
next.onclick = function(){
++i;
imgTag.src = PATH + imgList[i%NUM];
}
</script>
以上内容就可以基本实现功能了,为了使页面至少还算能看,再给它写一点css吧
*{
margin: 0;
padding: 0;
}
#imageDiv{
margin: 100px;
padding: 20px;
background-color: aliceblue;
text-align: center;
}
button {
width: 40px;
height: 40px;
border-radius: 50%;
border-color: aliceblue;
margin: 20px;
background-color: white;
color: gray;
font-size: larger;
position: relative;
top: -150px;
}
img{
height: 300px;
}
效果:
可以点击两侧的按钮,循环展示三张卡图,如果想更换展示的图片的话,改imgList就可以。
易错点:getElementsByTagName这样的带‘s’函数,返回的是数组,记得带下标。