设为首页收藏本站
开启辅助访问 切换到窄版
搜索
爱开源网»首页 › 前端中台 › Web开发 › 基于html+js实现轮播图（自动轮播、左右按钮、小圆点点 ...

[web教学] 基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）

[复制链接]
查看807 | 回复0 | 2023-8-23 11:46:02 | 显示全部楼层 |阅读模式 来自 中国北京
使用html和js实现的一个简单小训练轮播图。大概功能紧张是：
1、使用时间函数自动切换图片；
2、在图片及按钮及小圆点的父节点身上绑定事故署理，添加mouseenter及mouseleave事故范例，让鼠标移入，图片暂停，移出，图片规复轮播；
3、在按钮的父节点身上绑定事故署理，事故范例为click，使用event.target判断点击的目的范围，让左右两个按钮，点击可以切换上一张或下一张；
4、给图片添加样式，让下面的四个小圆点会随图片变颜色；
5、在小圆点的父节点身上绑定事故署理，事故范例为click，同样使用event.target判断点击的目的范围，让小圆点可以点击并切换到对应的图片上。
仍旧使用的是DOM2事故署理，详细的表明和代码步调我都解释在下面的代码中的，请君一阅。
【注：仅作自己检察和分享学习之用】
结果图如下：

 代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>轮播图</title>
  9.     <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3881267_wfv3iyzbijg.css">
  10. </head>
  11. <style>
  12.     section {
  13.         position: relative;
  14.         height: 500px;
  15.         width: 780px;
  16.         border: 1px solid;
  17.         margin: 100px auto;
  18.     }
  20.     #img {
  21.         height: 100%;
  22.         width: 100%;
  23.         background-size: 100% 100%;
  24.     }
  26.     p {
  27.         position: absolute;
  28.         left: 50%;
  29.         bottom: 0px;
  30.         transform: translate(-50%, -50%);
  31.     }
  33.     i {
  34.         height: 15px;
  35.         width: 15px;
  36.         background-color: gray;
  37.         border-radius: 50%;
  38.         display: inline-block;
  39.         margin-right: 10px;
  40.     }
  42.     i:nth-child(1) {
  43.         background-color: white;
  44.     }
  46.     i:nth-child(4) {
  47.         margin-right: 0;
  48.     }
  50.     .left,
  51.     .right {
  52.         color: rgba(255, 255, 255, 0.7);
  53.         font-size: 50px;
  54.         font-weight: bolder;
  55.         position: absolute;
  56.         top: 50%;
  57.         font-weight: 500;
  58.     }
  60.     .left {
  61.         left: 0px;
  62.         transform: translate(15%, -50%);
  63.     }
  65.     .right {
  66.         right: 0px;
  67.         transform: translate(-15%, -50%);
  68.     }
  69. </style>
  71. <body>
  72.     <section>
  73.         <span class="left iconfont icon-anniu_jiantouxiangzuo"></span>
  74.         <img src="./img/冬至竹林1.jpg" alt="" id="img">
  75.         <span class="right iconfont icon-anniu-jiantouxiangyou"></span>
  76.         <p></p>
  77.     </section>
  78.     <script src="./index.js"></script>
  79. </body>
  81. </html>
复制代码
  1. /**  需求：
  2.          *  1、自动切换图片
  3.             2、鼠标移入，图片暂停，移出，图片恢复轮播
  4.             3、左右两个按钮，点击可以切换上一张或下一张
  5.             4、下面的四个小圆点会随图片变颜色
  6.             5、小圆点可以点击并切换到对应的图片上
  7.         */
  9.         //获取把圆点节点放置的盒子节点，即p节点
  10.         let pEle = document.getElementsByTagName("p")[0];
  11.         //获取事件代理的父元素section
  12.         let secEle = document.getElementsByTagName("section")[0];
  14.         let imgArr = [
  15.             "./img/冬至竹林1.jpg",
  16.             "./img/冬至竹林2.jpg",
  17.             "./img/冬至竹林3.jpg",
  18.             "./img/冬至竹林4.jpg",
  19.         ]
  20.         //获取时间函数的起始下标
  21.         let i = 0;
  22.         //图片有多少张，就传几个参进去，并且接收这个返回的数组
  23.         let cirArr = creatCircle(imgArr.length);
  24.         //遍历cirArr数组，将圆点添加进它的父节点p节点中
  25.         cirArr.forEach(node => pEle.appendChild(node));
  27.         //获取所有的圆点节点
  28.         let iEle = document.getElementsByTagName("i");
  29.         //给每一个圆点添加上自定义属性，并赋上下标
  30.         for (let k = 0; k < iEle.length; k++) {
  31.             iEle[k].dataset.index = k;
  32.         }
  34.         let timer;
  35.         //轮播：时间函数，1秒自动换一张
  36.         function playTime() {
  37.             timer = setInterval(() => {
  38.                 //循环展示图片
  39.                 i++;
  40.                 //如果已经跳到最后一张，就再次回到第一张
  41.                 if (i > imgArr.length - 1) {
  42.                     i = 0;
  43.                 }
  44.                 //给圆点添加样式，开始运行该函数
  45.                 addStyleI(i);
  46.                 //图片标签地址（src属性）
  47.                 img.src = imgArr[i];
  48.             }, 1000);
  49.         }
  50.         playTime();
  52.         // 鼠标移入，图片暂停
  53.         secEle.addEventListener("mouseenter", function () {
  54.             clearInterval(timer);
  55.             timer = null;
  56.         });
  57.         // 鼠标移出，图片恢复滚动
  58.         secEle.addEventListener("mouseleave", playTime);
  60.         //给父节点绑定一个事件代理，点击左右按钮切换图片
  61.         secEle.addEventListener("click", function (e) {
  62.             let event = e || window.event;
  63.             //点击左右按钮切换图片
  64.             if (event.target.className == "left iconfont icon-anniu_jiantouxiangzuo") {
  65.                 i--;
  66.             }
  67.             if (event.target.className == "right iconfont icon-anniu-jiantouxiangyou") {
  68.                 i++;
  69.             }
  70.             if (i < 0) {
  71.                 i = imgArr.length - 1;
  72.             }
  73.             if (i == imgArr.length) {//3
  74.                 i = 0;
  75.             }
  76.             img.src = imgArr[i];
  77.             addStyleI(i);
  78.             //点击小圆点可以切换到对应的图片上
  79.             if (event.target.nodeName == "I") {
  80.                 console.log("11111");
  81.                 //获得点击的圆点的自定义索引值
  82.                 cirI = event.target.dataset.index;
  83.                 //替换图片
  84.                 img.src = imgArr[cirI];
  85.                 //更改圆点样式
  86.                 addStyleI(cirI);
  87.                 //每当点击小圆点，i的值就会被赋成圆点下标的值
  88.                 i = cirI;
  89.             }
  90.         });
  92.         //暂停图片滚动
  93.         function picScroll() {
  94.             clearInterval(timer);
  95.         }
  97.         //生成圆点
  98.         function creatCircle(num) {
  99.             //创建一个空数组来接收这个圆点
  100.             let iArr = [];
  101.             for (let j = 0; j < num; j++) {
  102.                 //新增圆点节点
  103.                 let circleNode = document.createElement("i");
  104.                 //再把新增的圆点节点放进圆点数组中
  105.                 iArr.push(circleNode);
  106.             }
  107.             //完成后，返回该数组
  108.             return iArr;
  109.         }
  111.         //给圆点添加样式
  112.         function addStyleI(index) {
  113.             //圆点的默认颜色是灰色
  114.             [...iEle].forEach(node => node.style.backgroundColor = "gray");
  115.             //当跳到该图片时，圆点变成白色
  116.             iEle[index].style.backgroundColor = "white";
  117.         }
复制代码


来源：https://blog.csdn.net/m0_71734538/article/details/129100213
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
回复

使用道具 举报

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

本版积分规则

还是空着好

18

主题

0

回帖

54

积分

注册会员

Rank: 2

积分
54
回复楼主 返回列表