ASCII码 ASCII码

轮播图实例演示

发布于：2022-04-15 12:22:10  栏目：技术文档

代码

  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>轮播图</title>
  8.     <style>
  9.         /* ! 3. 轮播图 */
  11.         .slider {
  12.             max-width: 750px;
  13.             min-width: 320px;
  14.             margin: auto;
  15.             padding: 0 10px;
  16.         }
  18.         .slider .imgs {
  19.             /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  20.             height: 150px;
  21.         }
  23.         .slider .imgs img {
  24.             /* 图片完全充满父级空间显示 */
  25.             height: 100%;
  26.             width: 100%;
  27.             /* 图片带有圆角 */
  28.             border-radius: 10px;
  29.             /* 默认图片全部隐藏,只有有active的图片才显示 */
  30.             display: none;
  31.         }
  33.         .slider .imgs img:hover {
  34.             cursor: pointer;
  35.         }
  36.         /* 默认显示第一张 */
  38.         .slider .imgs img.active {
  39.             display: block;
  40.         }
  41.         /* 轮播图按钮组 */
  43.         .slider .btns {
  44.             /* 按钮水平一排显示,用flex,且水平居中 */
  45.             display: flex;
  46.             place-content: center;
  47.         }
  49.         .slider .btns span {
  50.             /* 按钮宽高相同,确定显示成一个正圆 */
  51.             width: 8px;
  52.             height: 8px;
  53.             /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  54.             background-color: rgba(255, 255, 255, 0.4);
  55.             /* 50%可确保显示为正圆 */
  56.             border-radius: 50%;
  57.             /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  58.             margin: -12px 3px 5px;
  59.         }
  61.         .slider .btns span.active {
  62.             background-color: #fff;
  63.         }
  65.     </style>
  66. </head>
  67. <body>
  68.     <div class="slider">
  69.         <!-- 
  70.             图片容器
  71.             1. 图片组
  72.             2. 按钮组
  73.             注: 按钮数组与图片数量是一样的
  74.          -->
  75.         <div class="imgs">
  76.             <!-- 轮播图默认从第一张开始显示 -->
  77.             <img src="./images/banner1.jpg" alt="" data-index="1" class="active" />
  78.             <img src="./images/banner2.jpg" alt="" data-index="2" />
  79.             <img src="./images/banner3.png" alt="" data-index="3" />
  80.         </div>
  81.         <!-- 切换按钮数量与图片数量必须一致，一一对应 -->
  82.         <div class="btns">
  83.             <span data-index="1" class="active" onclick="setActive()"></span>
  84.             <span data-index="2" onclick="setActive()"></span>
  85.             <span data-index="3" onclick="setActive()"></span>
  86.         </div>
  88.     </div>
  90.     <script>
  91.         // 1.获取全部图片和按钮
  92.         const imgs=document.querySelectorAll('.slider .imgs img');
  93.         const btns=document.querySelectorAll('.slider .btns span');
  94.         //2.设置激活状态
  95.         function setActive(ele) {
  96.             // 1.清空图片和所有按钮的激活状态
  97.             imgs.forEach(img=>img.classList.remove('active'));
  98.             btns.forEach(btn=>btn.classList.remove('active'));
  99.             // 2.根据按钮的索引data-index来确定应该将哪一张图片显示出来class=active   
  100.             // console.log(ele);
  101.             // console.log(event.target);
  102.             //给所有的图片和按钮加一个active
  103.             event.target.classList.add('active');
  104.             imgs.forEach(img=>{
  105.                 if (img.dataset.index===event.target.dataset.index){
  106.                     img.classList.add('active')
  107.                 }
  108.             })
  109.         }
  111.         // 3.自动播放
  112.         // [1,2,3]
  113.         // [2,3,1]
  114.         // [3,1,2]
  115.         // [1,2,3]
  116.         // 首尾相连,实现循环播放
  117.         // 自动点击: 事件派发器
  119.         // 间歇式触发,每隔一段固定时间会自动触发一次事件
  120.         // setInterval: 除了回调和时间外,还可传入第三个参数,做为回调的参数
  121.         // setInterval((a)=>{
  122.         //     console.log(a);
  123.         // },2000,Object.keys(btns));
  124.         // console.log(Object.keys(btns));
  125.             let autoInter = setInterval((arr)=>{
  126.                 // 1.头部删除
  127.                 let i=arr.shift()
  128.                 //2.尾部追加
  129.                 arr.push(i);
  130.                 //3.事件派发：模拟用户点击
  131.                 btns[i].dispatchEvent(new Event('click'))
  132.             },2000,Object.keys(btns));
  133.             // console.log(Object.keys(btns));
  134.             // console.log(Object.keys(imgs));
  135.          // 作业1: 实现鼠标悬停时自动停止播放, 离开时又自动播放
  136.          imgs.forEach((i) => {
  137.             i.onmouseover = function () {
  138.             clearInterval(autoInter);
  139.             console.log("over");
  140.          };
  141.         i.onmouseout = function () {
  142.             autoInter = setInterval(
  143.             (arr) => {
  144.             let i = arr.shift();
  145.             arr.push(i);
  146.             btns[i].dispatchEvent(new Event("click"));
  147.             console.log(arr);
  148.           },
  149.           3000,
  150.           Object.keys(btns)
  151.         );
  152.         console.log("out");
  153.       };
  154.     });
  155.         // 作业2[可选]: 给这个轮播图加上翻页按按钮,实现向前和向后翻页播放   
  156.     </script>
  157. </body>
  158. </html>

效果图

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行