search

博客列表 >0228作业-用原生JavaScript实现轮播图-php培训十期线上班

0228作业-用原生JavaScript实现轮播图-php培训十期线上班

Dseven
Dseven原创
2020年03月02日 11:46:59915浏览

1 作业要求

  • 实现轮播图
  • 有左右切换按钮（左右箭头）
  • 有底层快捷按钮（小圆点）
  • 图片渐隐渐显

2 作业完成步骤

  • 完成html框架的搭建
  • 完成css样式的搭建
  • 完成脚本编写
    • 动态生成快捷按钮
    • 为快捷按钮添加点击监听器
    • 为左右切换按钮添加点击监听器
    • 为鼠标移入移出事件添加监听器

3 难点分析

  • 页面框架搭建部分
    • 图片的显示与隐藏是由累加的active类属性进行控制的，在css样式中，active应单独设立样式，display属性设置为block，用来显示；在img类属性中display属性设置为none，用来隐藏。
    • 小圆点的添加是动态的，需要设定包裹快捷按钮的容器。
    • 布局中需要使用绝对定位，并设置z-index属性，该属性值越大越在上层。
  • 脚本编写部分
    • 定时器的使用。定时器是每个一定时间就执行一次，但并不是在这个时间内不执行其他代码，因此涉及到定时器完成后才能执行的代码，应该放入定期中进行判断。
    • 渐隐渐显效果，在快捷按钮和左右切换按钮上需要分别设置。因为自动切换时模拟的点击右边切换按钮，因此不需要再设置渐隐渐显。

4 关键代码

文档结构

  1. <div class="main">
  2.     <div class="container">
  3.         <img src="banner/banner1.jpg" alt="" data-index="index1" class="img active">
  4.         <img src="banner/banner2.jpg" alt="" data-index="index2" class="img">
  5.         <img src="banner/banner3.jpg" alt="" data-index="index3" class="img">
  6.         <img src="banner/banner4.jpg" alt="" data-index="index4" class="img">
  7.         <span class="left btn"><</span>
  8.         <span class="right btn">></span>
  9.         <!--下面的div中动态添加轮播图小圆点-->
  10.         <div class="point-list"></div>
  11.     </div>
  12. </div>

CSS样式

  1. .img {width: 600px;height: 210px;display: none;box-sizing: border-box;opacity: 1;}
  2. .point-list {position: absolute;bottom: 0;left: 0;right: 0;display: flex;flex-flow: row nowrap;justify-content: center;align-items: center;z-index: 2;}
  3. .point {display: block;width: 10px;height: 10px;border-radius: 5px;background-color: #fff;margin: 0 5px;}
  4. .active {display: block;background-color: black;}

JavaScript部分
生成小圆点并增加监听器

  1.     //获取所有class为img的标签元素
  2.     var imgs = document.querySelectorAll('.img');
  3.     //动态生成小圆点
  4.     imgs.forEach(function (item) {
  5.         //生成一个小圆点
  6.         var point = document.createElement('span');
  7.         //为生成的小圆点添加class属性point
  8.         point.classList.add('point');
  9.         //设置小圆点的自定义属性data-index的值为对应的img的自定义属性值
  10.         point.dataset['index'] = item.dataset['index'];
  11.         //获取文档中存放校园的，class为.point-list的用来存放小圆点的容器
  12.         var pointlist = document.querySelector('.point-list');
  13.         //将小圆点成为容器的子节点
  14.         pointlist.appendChild(point);
  15.         //查看当前img元素的class中是否有active的值，如果有，就赋给相应的小圆点
  16.         item.classList.forEach(function (v) {
  17.             if (v === 'active') {
  18.                 point.classList.add('active');
  19.             }
  20.         })
  21.     });
  22.     //为每个小圆点添加监听器，监听click事件
  23.     var points = document.querySelectorAll('.point');
  24.     points.forEach(function (item) {
  25.         item.addEventListener('click', function (ev) {
  26.             //获取当前点击事件对应元素的自定义属性值
  27.             var index = ev.target.dataset['index'];
  28.             var currentimg = document.querySelector('.img.active');
  29.             //获得当前显示图片的计算opacity值
  30.             var opacity = parseInt(window.getComputedStyle(currentimg).opacity);
  31.             var timery = setInterval(function () {
  32.                 opacity -= 0.05;
  33.                 currentimg.style.opacity = opacity;
  34.                 //当opacity的值小于0之后结束当前定时器，进入到下一个图片，并启动渐显定时器
  35.                 if (opacity <= 0) {
  36.                     //结束当前定时器
  37.                     clearInterval(timery);
  38.                     imgs.forEach(function (item) {
  39.                         //清空img元素的active值
  40.                         item.classList.remove('active');
  41.                         if (index === item.dataset['index']) {
  42.                             item.classList.add('active');
  43.                         }
  44.                     });
  45.                     //使用函数来将小圆点的active属性与同index值的img进行绑定
  46.                     setPointActive(index);
  47.                     currentimg = document.querySelector('.img.active');
  48.                     currentimg.style.opacity = 0;
  49.                     //执行渐显函数
  50.                     fadeIn(currentimg,50);
  51.                 }
  52.             }, 30);
  53.         });
  54.     });

为按钮增加监听器(右侧与左侧类似，省略)

  1.     //找到左侧按钮
  2.     var leftbtn = document.querySelector('.left');
  3.     //为按钮增加监听器
  4.     leftbtn.addEventListener('click', function () {
  5.         //找到当前显示的图片
  6.         var currentimg = document.querySelector('.img.active');
  7.         //获得当前显示图片的计算opacity值,并将其转换为整数类型
  8.         var opacity = parseInt(window.getComputedStyle(currentimg).opacity);
  9.         //设置渐隐定时器
  10.         var timery = setInterval(function () {
  11.             opacity -= 0.05;
  12.             currentimg.style.opacity = opacity;
  13.             //当opacity的值小于0之后结束当前定时器，进入到下一个图片，并启动渐显定时器
  14.             if (opacity <= 0) {
  15.                 //结束当前定时器
  16.                 clearInterval(timery);
  17.                 //移除当前显示图片的active属性，将其隐藏
  18.                 currentimg.classList.remove('active');
  19.                 //如果当前节点的前一个节点值不为空，且class中有img，就将前一个节点作为当前节点
  20.                 if (currentimg.previousElementSibling !== null && currentimg.previousElementSibling.classList.contains('img')) {
  21.                     currentimg = currentimg.previousElementSibling;
  22.                 } else {
  23.                     //如果当前节点的前一个节点值为空，或者class中没有img，就将imgs的最后一个节点作为当前节点
  24.                     currentimg = imgs.item(imgs.length - 1);
  25.                 }
  26.                 //将兄弟节点设置为当前节点后，给当前节点的class属性中增加active值，让其显示
  27.                 currentimg.classList.add('active');
  28.                 //使用函数来将小圆点的active属性与同index值的img进行绑定
  29.                 setPointActive(currentimg.dataset['index']);
  30.                 //将当前节点的opacity的值归零，以便开始渐显
  31.                 currentimg.style.opacity = 0;
  32.                 //执行渐显函数
  33.                 fadeIn(currentimg,20);
  34.             }
  35.         }, 20);
  36.     }, false);

为鼠标移入移出事件增加监听器

  1.     var container = document.querySelector('.container');
  2.     //定时器
  3.     var timer = null;
  4.     //当鼠标移开时，启动定时器
  5.     container.addEventListener('mouseout', function () {
  6.         var ev = new Event('click');
  7.         timer = setInterval(function () {
  8.             rightbtn.dispatchEvent(ev);
  9.         }, 5000);
  10.     }, false);
  11.     //当鼠标移入时，取消定时器
  12.     container.addEventListener('mouseover', function () {
  13.         clearInterval(timer);
  14.     }, false);

小圆点设置反色函数

  1.     function setPointActive(index) {
  2.         points.forEach(function (item) {
  3.             item.classList.remove('active');
  4.             if (index === item.dataset['index']) {
  5.                 item.classList.add('active');
  6.             }
  7.         });
  8.     }

渐显函数

  1.     function fadeIn(currentimg,time) {
  2.         var opacity = parseInt(window.getComputedStyle(currentimg).opacity);
  3.         var timerx = setInterval(function () {
  4.             opacity += 0.05;
  5.             currentimg.style.opacity = opacity;
  6.             console.log(opacity + 'IN');
  7.             if (opacity >= 1) {
  8.                 clearInterval(timerx);
  9.             }
  10.         }, time);
  11.     }
上一条：HTML脚本下一条：0220作业+数组函数大全与字符串函数（常用）+10期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多