<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 553px;
/* height: 415px; */
margin: 20px auto;
padding: 10px;
background-color: chocolate;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 点击按钮切换图片
// var btn = document.getElementById('outer');
var pre = document.getElementById('pre');
var next = document.getElementById('next');
// 获得img标签的src属性,不加[0]获得的是[object HTMLCollection],加了之后获得的是[object HTMLImageElement]
var img = document.getElementsByTagName('img')[0];
// alert(img);
// 创建数组,用来保存图片路径
var imgArray = [
'/home/bruce/Bruce Lin/Fun/photo/girls/1/01.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/02.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/03.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/04.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/05.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/06.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/07.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/08.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/09.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/10.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/11.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/12.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/13.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/14.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/15.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/16.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/17.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/18.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/19.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/20.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/21.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/22.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/23.jpg',
'/home/bruce/Bruce Lin/Fun/photo/girls/1/24.jpg',
]
// 创建一个变量,来保存当前图片的索引
var index = 0;
// 设置提示文字
// 获取id为info的p元素
var info = document.getElementById('info');
info.innerHTML = '一共' + imgArray.length + '图片,现在是' + (index + 1) + '图片.';
// 分别为两个按钮绑定单击函数
// 要切换图片,就是要修改img标签的src属性
pre.onclick = function(){
// 切换到上一张,索引自减
index--;
// 判断index是否小于0
if (index < 0) {
// 第一张时,点击上一张,回到最后一张.
// index = imgArray.length -1
index = 0;
alert('已经是第一张图片了.')
};
img.src = imgArray[index];
info.innerHTML = '一共' + imgArray.length + '图片,现在是' + (index + 1) + '图片.';
};
next.onclick = function(){
// 切换到上一张,索引自加
index++;
// 判断index是否大于0
if (index > imgArray.length - 1){
// 最后一张时,点击下一张,回到第一张
// index = 0;
index = imgArray.length - 1;
alert("已经是最后一张图片了.")
};
img.src = imgArray[index];
info.innerHTML = '一共' + imgArray.length + '图片,现在是' + (index + 1) + '图片.';
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="/home/bruce/Bruce Lin/Fun/photo/girls/1/01.jpg" alt="暂无照片">
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
JS图片切换
最新推荐文章于 2024-04-27 19:42:54 发布