中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › JS实现图片上下切换

[前端] JS实现图片上下切换

2811 0
Honkers 2022-10-21 15:36:26 | 显示全部楼层 |阅读模式
本文实例为大家分享了JS实现图片上下切换的具体代码，供大家参考，具体内容如下
源代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style type="text/css">
  9.     *{
  10.       margin: 0;
  11.       padding: 0;
  12.     }
  13.     #outer{
  14.       width: 130px;
  15.       margin: 50px auto;
  16.       padding: 10px;
  17.       background-color: greenyellow;
  18.       text-align: center;
  19.     }
  20.   </style>
  21.   <script type="text/javascript">
  22.     window.onload=function(){
  23.       var prev=document.getElementById("prev");
  24.       var next=document.getElementById("next");
  25.       //切换图片就是修改img的src属性
  26.       //获取img标签
  27.       var img=document.getElementsByTagName("img")[0];
  28.       //创建数组,保存图片路径
  29.       var imgArr=["1.png","2.png","3.png"];
  30.       //创建变量保存当前显示图片的索引
  31.       var index=0;
  32.       //设置提示文字
  33.       var info=document.getElementById("info");
  34.       info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
  35.       prev.onclick=function(){
  36.         index--;
  37.         //判断index是否小于0
  38.         if (index<0){
  39.           index=imgArr.length-1;
  40.         }
  41.         img.src=imgArr[index];
  42.         info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(inex+1)+"张";
  44.       };
  45.       next.onclick=function(){
  46.         index++;
  47.         if(index>imgArr.length-1){
  48.           index=0;
  49.         }
  50.         img.src=imgArr[index];
  51.         info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
  52.       };
  53.     };
  54.   </script>
  56. </head>
  57. <body>
  58.   <div id="outer">
  59.     <p id="info"></p>
  60.     <img src="1.png" alt="1">
  61.     <button id="prev">上一张</button>
  62.     <button id="next">下一张</button>
  63.   </div>
  64. </body>
  65. </html>
复制代码
效果如下图


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。

本帖子中包含更多资源

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

×
回复

使用道具 举报

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

本版积分规则

Honkers

特级红客

关注
  • 3159
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

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