点击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果。供大家参考:
HTML代码如下:
<div class="img"> <img src="images/1.jpg" id="myImg" class="myImg" alt="这里是1.jpg"> <p> <input type="button" id="pre" class="btn" value="上一张"> <input type="button" id="next" class="btn" value="下一张"> </p> </div>
CSS代码如下:
*{ margin: 0; padding: 0; } img{ boder:none; } button{ outline: none; vertical-align: middle; } .img{ width: 100%; margin-left: auto; margin-right: auto; margin-top: 20px; text-align: center; } .myImg{ width: 500px; height: 300px; } p{ text-align: center; } p .btn{ width: 100px; height: 30px; background: #306bbf; color: #fff; margin-top: 20px; margin-bottom: 20px; }
javascript 部分:
//找标签 let myImg = document.getElementById("myImg"); let pre=document.getElementById("pre"); let next=document.getElementById("next"); //创建一个保存图片的数组 let arrImg = ["images/1.jpg", "images/1-1.png", "images/3.jpg" ]; //数组的索引下标 let index=0; //定义事件函数 function preImg(event){ index--; //实现循环切换 if (index<0) { index=arrImg.length-1; } myImg.src = arrImg[index]; } function nextImg(event){ index++; //实现循环切换 if (index>arrImg.length-1) { index=0; } myImg.src = arrImg[index]; } pre.addEventListener('click',preImg); next.addEventListener('click',nextImg);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
本文总结了PHP 预定义变量、魔术常量和魔术方法。分享给大家供大家参考,具体如...
需求 需要实现一个可以主动触发消息推送的功能,这个可以实现向模板消息那个,给...
2月22日消息 据 Mspoweruser 报道,微软将在下个月为 Windows 版 Microsoft Word...
不,这不是 IBM 在发号施令。这个决定是红帽内部出于商业上的原因做出的,而且这...
我的电脑因为用批处理清理文件,所以不能运行了, 只 1.查看数据库连接语句没有发...
为表头设置背景图象,可以使用任何GIF或者JPEG图片文件。 基本语法 TH BACKGROUN...
本文实例为大家分享了js实现移动端轮播图效果的具体代码,供大家参考,具体内容...
本文讲述了简单的手工hibernate程序示例。分享给大家供大家参考。具体如下: 今...
1. 命令行 不知道大家在日常操作 redis 时用什么可视化工具呢?以前总觉得没有什...
由于动态页是utf8格式的编码,我得到它的html代码后,使用fso保存,生成html是成...