javascript实现点击图片切换
程序员文章站
2023-12-29 17:58:34
击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果。html代码如下:
击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果。
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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
javascript实现点击图片切换
-
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
-
javascript - 请问:在输入框内粘贴图片并上传到服务器,怎么用PHP+JS实现?
-
js实现网站首页图片滚动显示_javascript技巧
-
js实现点击注册按钮开始读秒倒计时的小例子_javascript技巧
-
js实现div的切换特效上一个下一个_javascript技巧
-
jquery实现图片渐变切换兼容ie6/Chrome/Firefox_jquery
-
JavaScript实现图片无缝滚动效果
-
js实现每日自动换一张图片的方法_javascript技巧
-
JS实现点击按钮后框架内载入不同网页的方法_javascript技巧