点击切换图片，控制是否可以循环切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
color: white;
}
#control {
width: 590px;
height: 50px;
border: 10px solid black;
/* border-bottom-width: 0px; */
background-color: gray;
margin: 0 auto;
text-align: center;
line-height: 50px;
}
#container {
width: 590px;
height: 470px;
margin: 0 auto;
position: relative;
border: 10px solid black;
background-color: grey;
margin-top: 10px;
}
#pre,
#next {
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 22px;
top: 220px;
background-color: black;
opacity: 0.5;
}
#pre {
left: 0;
}
#next {
right: 0;
}
#order,
#info {
/* width: 590px; */
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: black;
opacity: 0.5;
position: absolute;
color: white;
}
#order {
top: 0;
}
#info {
bottom: 0;
}
</style>
</head>
<body>
<div id="control">
<button id="round">循环播放</button>
<button id="single">顺序播放</button>
</div>
<div id="container">
<a href="javascript:" id="pre"><</a>
<a href="javascript:" id="next">></a>
<div id="order">图片正在加载...</div>
<div id="info">图片正在加载...</div>
<img src="" alt="" id="picture">
</div>
<script>
//定义图片数组
let imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
//定义info数组
let infoArr = ['图片一', '图片二', '图片三', '图片四'];
var index = 0; //数组索引
let flag = true; //假定true为顺序播放
function $(id) {
return document.getElementById(id);
}
//定义函数，显示信息
function showData() {
$('order').innerHTML = (index + 1) + '/' + imgArr.length;
$('info').innerHTML = infoArr[index];
$('picture').src = imgArr[index];
}
showData();
//左箭头事件绑定
$('pre').onclick = function() {
index--;
if (index === -1 && flag) {
index = 0;
alert("已经是第一张图片了！");
} else if (index === -1 && !flag) {
index = imgArr.length - 1;
}
showData();
}
//右箭头事件绑定
$('next').onclick = function() {
index++;
if (index === imgArr.length && flag) {
index = imgArr.length - 1;
alert("已经是最后一张了！");
} else if (index === imgArr.length && !flag) {
index = 0;
}
showData();
}
//循环播放事件绑定
$('round').onclick = function() {
flag = false;
alert("现在开始循环播放！");
}
$('single').onclick = function() {
flag = true;
alert("现在开始顺序播放！");
}
</script>
</body>
</html>
效果图