中国红客联盟国际站联盟介绍联盟架构联盟章程发展历程联盟邮箱积分VIP捐助联盟收藏本站
请登录
立即注册
门户首页
交流社区BBS
技术圈子Group
关于我们
红客大事记
插件Plugin
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程脚本交流 › 使用JS实现简单的图片切换功能

[前端] 使用JS实现简单的图片切换功能

2264 0
黑夜隐士 2022-10-21 15:45:22 | 显示全部楼层 |阅读模式
本文实例为大家分享了使用JS实现简单的图片切换的具体代码，供大家参考，具体内容如下
效果如图：


分析：首先为按钮添加单击响应事件，然后构造函数。
其实切换图片就是切换img标签src的属性，可以获取标签属性然后进行修改即可。
可以把属性值存放在一个数组中，通过数组的索引来获取。
附上相关代码：
css部分代码：
  1. <style type="text/css">
  2. *{
  3. margin: 0;
  4. padding: 0;
  5.   }
  6.   #a{
  7.   margin: 50px auto;
  8.   width: 500px;
  9.   padding: 15px;
  10.   text-align: center;
  11.   background-color: #99FF99;
  13. }
  14. </style>
复制代码
js代码：
  1. <script>
  2. window.onload=function(){
  3.   var btn1 = document.getElementById("btn1");
  4.   var btn2 = document.getElementById("btn2");
  5.   var img = document.getElementsByTagName("img")[0];
  6.   //构建一个数组存图片
  7.   var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
  8.   var index = 0;
  9.   //console.log(src);
  10.   var p = document.getElementById("b");
  12.     btn1.onclick = function(){
  13.      //alert("1");
  14.      //img.src="img/2.jpg"
  15.      index--;
  16.      if (index<0){
  17.       index = imgArr.length-1
  18.      }
  19.      img.src=imgArr[index]
  20.      p.innerHTML = "共"+ imgArr.length+"张图片，当前第"+(index+1)+"张"
  21.     };
  22.     btn2.onclick = function(){
  23.      //alert("2");
  24.      index++;
  25.      if (index>4){
  26.       index = 0;
  27.      }
  28.      img.src=imgArr[index]
  29.    p.innerHTML = "共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
  30.   };
  31. };
  32. </script>
复制代码
body部分：
  1. <body>
  2. <div id="a">
  3. <img src="img/1.jpg" alt="雪糕" />
  4. <button id="btn1">上一张</button>
  5. <button id="btn2">下一张</button>
  6. <p id="b">共5张图片，当前第1张</p>
  7. </div>
  9. </body>
复制代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

黑夜隐士

创始人

关注
  • 1059
    主题
  • 329
    粉丝
  • 354
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天