在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换。
如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在html中创建一个放照片的容器和两个切换的按钮。
<img id="icon" src="img/icon_01.png" alt="">
<button id="prev">上一张</button>
<button id="next">下一张</button>
然后,我们需要知道当前图片的索引,当点击上一张的时候,索引自减;点击下一张的时候,索引自增。(图片后缀的数字代表当前图片的序号,如果用数组,则可以直接用索引获取图片地址了)
<script>
window.onload = function () {
// 1. 获取需要的标签
var icon = document.getElementById("icon");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
// 2. 监听按钮的点击
var currentIndex = 1; //默认显示第一张
prev.onclick = function () {
currentIndex --;
icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
};
next.onclick = function () {
currentIndex ++;
icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
};
}
</script>
现在,已经可以进行基本的上下切换了,但是图片的数量有限,当切换到最后一张的时候,再点击下一张,就会报错, 在第一张的时候点击上一张也会报错,所以,我们需要设置两个边界值,最大值代表图片的总数量,当到达最大值,再点击下一张时,应该从1开始重新计数;最小值代表1,也是初始化时默认显示的序号,此时点击上一张的时候,应该从最大值重新开始计数。
var maxIndex = 9, minIndex = 1, currentIndex = minIndex;
prev.onclick = function () {
if (currentIndex === minIndex){ // 边界值
currentIndex = maxIndex;
}else { // 正常情况
currentIndex --;
}
icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
};
next.onclick = function () {
if (currentIndex === maxIndex){ // 边界值
currentIndex = minIndex;
}else { // 正常情况
currentIndex ++;
}
icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
};
这样,简易的图片切换效果就实现了,完整代码如下:(完整代码下载链接:点这里)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="icon" src="img/icon_01.png" alt="">
<button id="prev">上一张</button>
<button id="next">下一张</button>
<script>
window.onload = function () {
// 1. 获取需要的标签
var icon = document.getElementById("icon");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
// 2. 监听按钮的点击
var maxIndex = 9, minIndex = 1, currentIndex = minIndex;
prev.onclick = function () {
if (currentIndex === minIndex){ // 边界值
currentIndex = maxIndex;
}else { // 正常情况
currentIndex --;
}
icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
};
next.onclick = function () {
if (currentIndex === maxIndex){ // 边界值
currentIndex = minIndex;
}else { // 正常情况
currentIndex ++;
}
icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
};
}
</script>
</body>
</html>