JavaScript之图片操作1
2021-07-15 07:08
阅读：676
YPE html>
标签：数字 自增 最大值 设置 包括 ini 报错 == 直接
在网页中，经常需要对图片经常各种操作，包括切换，轮播等等，接下来将总结一些常见的图片操作，首先是最简单前后切换。
如上面所示，通过点击右边的按钮切换左边的图片，为了实现想要的效果，首先，我们需要在html中创建一个放照片的容器和两个切换的按钮。
"icon" src="img/icon_01.png" alt="">
然后，我们需要知道当前图片的索引，当点击上一张的时候，索引自减；点击下一张的时候，索引自增。（图片后缀的数字代表当前图片的序号，如果用数组，则可以直接用索引获取图片地址了）
现在，已经可以进行基本的上下切换了，但是图片的数量有限，当切换到最后一张的时候，再点击下一张，就会报错， 在第一张的时候点击上一张也会报错，所以，我们需要设置两个边界值，最大值代表图片的总数量，当到达最大值，再点击下一张时，应该从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"); };
这样，简易的图片切换效果就实现了，完整代码如下：
"en">"UTF-8">
JavaScript之图片操作1
标签：数字 自增 最大值 设置 包括 ini 报错 == 直接
原文地址：https://www.cnblogs.com/yuyujuan/p/9536942.html
上一篇：java单元测试
评论
亲，登录后才可以留言！