• 售前

  • 售后

热门帖子
入门百科

JavaScript实现切换多张图片

[复制链接]
郭光庆 显示全部楼层 发表于 2021-10-25 20:06:03 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了JavaScript实现切换多张图片的详细代码,供各人参考,详细内容如下
循环切换图片
HTML+CSS+JavaScript

html部分
  1. <body>
  2. <div class="outer">
  3.   <p id="info"></p>
  4.   <img src="./images/banner1.png" alt="图片" title="图片">
  5.   <button id='prev'>上一张</button>
  6.   <button id='next'>下一张</button>
  7. </div>
  8. </body>
复制代码
css部分
  1. <style>
  2.   * {
  3.    padding: 0;
  4.    margin: 0;
  5.   }
  6.   .outer {
  7.    width: 1000px;
  8.    background-color: #bfa;
  9.    margin: 50px auto;
  10.    text-align: center;
  11.    padding: 10px;
  12.   }
  13.   img {
  14.    width: 900px;
  15.    display: block;
  16.    margin: 0 auto;
  17.   }
  18.   button {
  19.    margin: 5px;
  20.   }
  21. </style>
复制代码
JavaScript部分
这里用到了JavaScript的DOM对象
  1. <script>
  2.   // 加载文档
  3.   window.onload = function () {
  4.    //获取img标签
  5.    var img = document.getElementsByTagName("img")[0];
  6.    
  7.    //创建一个数组保存所有图片的路径
  8.    //这里设置图片文件的路径
  9.    var imgArr = ["./images/banner1.png", "./images/banner2.png", "./images/banner3.png", "./images/banner4.png", "./images/banner5.png"];
  10.    //设置图片初始值
  11.    var index = 0;
  12.    //获取id为info的p标签
  13.    var info = document.getElementById("info");
  14.    info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";
  15.    //绑定两个按钮
  16.    //上一张
  17.    document.getElementById("prev").onclick = function () {
  18.     index--;
  19.     //判断index是否小于0
  20.     if (index < 0) {
  21.      index = imgArr.length - 1;//循环(第一张-》最后一张)
  22.     }
  23.     img.src = imgArr[index];
  24.     info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";
  25.    };
  26.    //下一张
  27.    document.getElementById("next").onclick = function () {
  28.     index++;
  29.     //判断index是否大于数组的长度-1(数组的最大下标)
  30.     if (index > imgArr.length - 1) {
  31.      index = 0;//循环(最后一张-》第一张)
  32.     }
  33.     img.src = imgArr[index];
  34.     info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";
  35.    }
  36.   };
  37. </script>
复制代码
预览效果:





以上就是本文的全部内容,盼望对各人的学习有所帮助,也盼望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作