- 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>