共计 1562 个字符,预计需要花费 4 分钟才能阅读完成。
原文地址
能够间接复制粘贴关上,图片是在线的,原理简略好懂!
成果
源码
<!DOCTYPE html>
<html>
<!--JQuery 在线援用 -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#lv {
margin: 0 auto;
width: 1000px;
height: 800px;
background: rgb(150, 235, 180);
text-align: center;
}
#img{
width: 900px;
height: 600px;
margin-top: 60px;
}
#pre{
position: absolute;
right: 51%;
}
#next{
position: absolute;
right: 44%;
}
#info{
font-size: x-large;
padding-top: 30px;
}
</style>
</head>
<body>
<div id="lv">
<p id="info"></p>
<img id ='img' src=""alt="" />
<button id="pre"> 上一张 </button>
<button id="next"> 下一张 </button>
</div>
</body>
<script type="text/javascript">
$(function(){
// 获取两个按钮
var pre = document.getElementById("pre");
var next = document.getElementById("next");
// 要切换图片就是要批改 img 标签的 src 属性
// 获取 img 标签,然而返回的是数组,所以你得操作的是数组中的对象
var img = document.getElementsByTagName("img")[0];
// 创立一个数组用来保留图片的门路
var imgArr = ["https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/560-300.jpg", "https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/0537AFF0-55BA-4826-9192-BAA8813F0CA7_1_105_c.jpeg", "https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/615A8F91-1822-445F-903E-5A87FA369977.jpeg"];
var index = 0;
var info = document.getElementById("info");
img.src = imgArr[0];
info.innerHTML = "总共" + imgArr.length + "照片,当初是第" + (index + 1) + "照片";
pre.onclick = function () {if (--index < 0) {index = imgArr.length - 1;}
img.src = imgArr[index];
info.innerHTML = "总共" + imgArr.length + "照片,当初是第" + (index + 1) + "照片";
};
next.onclick = function () {if (++index > imgArr.length - 1) {index = 0;}
img.src = imgArr[index];
info.innerHTML = "总共" + imgArr.length + "照片,当初是" + (index + 1) + "照片";
};
})
</script>
</html>
正文完
发表至: javascript
2022-05-12