<!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>
*{
padding: 0;
margin: 0;
}
.box{
position: relative;
width: 600px;
height: 400px;
}
#box1{
width: 600px;
height: 20px;
background-color: black;
color: white;
font-size: 14px;
line-height: 20px;
text-align: center;
}
#img{
width: 600px;
height: 400px;
}
#box2{
width: 600px;
height: 20px;
background-color: black;
color: white;
font-size: 14px;
line-height: 20px;
text-align: center;
}
#bt1{
position: absolute;
top: 250px;
left: 0;
height: 50px;
width: 30px;
}
#bt2{
position: absolute;
top: 250px;
right: 0;
height: 50px;
width: 30px;
}
</style>
</head>
<body>
<div id="box1">1/4</div>
<div class="box">
<img id="img" src="./img/11.jpg" alt="">
<button id="bt1"><</button>
<button id="bt2">></button>
</div>
<div id="box2">动漫1</div>
<script>
// 描述效果: 点击右箭头, 图片递增,上下文字更新, 当图片到第四张的时候, 再点击一次返回第一张
// 获取元素
var btns = document.getElementsByTagName('button');
var img = document.getElementsByTagName('img')[0];
var divs = document.getElementsByTagName('div');
console.log(btns,divs);
// 用数组的方式存储多个数据
var arr = ['./img/11.jpg', './img/22.jpg', './img/33.jpg', './img/44.jpg'];
// 当不知道当前是第几张图片的时候, 设一个变量, 存储当前是第几个下标的图片
var n = 0;
// 0 ---> 1 ---> 2 ----> 3
// 1 ---> 2 --> 3--> 4
// 添加事件
btns[1].onclick = function(){
n++;
// 判断n如果大于最后一个图片的下标,就回到第一张
if(n > arr.length-1){
n = 0;
}
// 更新图片
img.src = arr[n];
// 渲染文字
divs[0].innerHTML = (n+1) + '/' + arr.length;
divs[2].innerHTML = '动画' + (n + 1);
}
btns[0].onclick = function(){
n--;
// 判断n比第一张图的下标小的时候,回到最后一张图
if(n < 0){
n = arr.length - 1;
}
// 更新图片
img.src = arr[n];
// 渲染文字
divs[0].innerHTML = (n+1) + '/' + arr.length;
divs[2].innerHTML = '动画' + (n + 1);
}
</script>
</body>
</html>