search

博客列表 >轮播图-添加翻页-自动播放-图片懒加载

轮播图-添加翻页-自动播放-图片懒加载

葡萄枝子
葡萄枝子原创
2021年01月12日 18:16:161243浏览

轮播图-添加翻页-自动播放-图片懒加载

  1. 为翻页按钮添加功能
  2. 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放
  3. 上节课的选项卡, 懒加载二选一

1和2轮播图，添加翻页和隔两秒自动播放

  • head 标签添加
  1. <link rel="stylesheet" href="banner/style.css" />
  • 引入的banner/style.css是默认的
  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. a {
  8.   text-decoration: none;
  9. }
  11. /* 轮播图的容器 */
  12. .container {
  13.   width: 62.5em;
  14.   height: 22em;
  15.   margin: 1em auto;
  16.   /* 转为定位元素/定位父级 */
  17.   position: relative;
  18. }
  19. /* 图片组 */
  20. .container > .imgs img {
  21.   width: 100%;
  22.   height: 100%;
  24.   /* 默认全部隐藏 */
  25.   display: none;
  27.   /* 将所有的图片进行绝对定位，确保每一次只看到一张,所有图片共享这个容器 */
  28.   position: absolute;
  29.   left: 0;
  30.   top: 0;
  31. }
  33. /* 设置默认显示的图片(第一张) */
  34. .container > .imgs img.active {
  35.   display: block;
  36. }
  38. /* 按钮组(独立按钮) */
  39. .container > .btns {
  40.   position: absolute;
  41.   left: 0;
  42.   right: 0;
  43.   bottom: 0;
  44.   /* 水平居中 */
  45.   text-align: center;
  46. }
  47. .container > .btns a {
  48.   /* 转成行内块元素: 即能水平排列,双支持宽度设置 */
  49.   display: inline-block;
  50.   padding: 0.5em;
  51.   margin: 0 0.2em;
  52.   background-color: #fff;
  53.   border-radius: 50%;
  54. }
  55. .container > .btns a.active {
  56.   background-color: #000;
  57. }
  58. /* 翻页按钮 */
  59. .container .skip a {
  60.   position: absolute;
  61.   width: 2.5rem;
  62.   height: 5rem;
  63.   line-height: 5rem;
  64.   text-align: center;
  65.   opacity: 0.3;
  66.   top: 9rem;
  67.   font-weight: lighter;
  69.   font-size: 2rem;
  70.   background-color: #ccc;
  71. }
  72. .container .skip .prev {
  73.   left: 0;
  74. }
  75. .container .skip .next {
  76.   right: 0;
  77. }
  78. .container .skip *:hover {
  79.   opacity: 0.6;
  80.   color: #666;
  81. }
  • body 中添加html是默认的
  1. <div class="container">
  2.     <!-- 1. 图片组 -->
  3.     <nav class="imgs">
  4.         <a href="#"><img src="banner/banner1.jpg" alt="" data-index="0" class="active" /></a>
  5.         <a href="#"><img src="banner/banner2.jpg" alt="" data-index="1" /></a>
  6.         <a href="#"><img src="banner/banner3.jpg" alt="" data-index="2" /></a>
  7.         <a href="#"><img src="banner/banner4.jpg" alt="" data-index="3" /></a>
  8.     </nav>
  9.     <!-- 2. 图片小按钮 -->
  10.     <nav class="btns">
  11.         <!-- 这些小按钮应该根据图片数量自动生成 -->
  12.         <!-- <a href="" data-index="0" class="active"></a>
  13.     <a href="" data-index="1"></a>
  14.     <a href="" data-index="2"></a>
  15.     <a href="" data-index="3"></a> -->
  16.     </nav>
  17.     <!-- 3. 翻页 -->
  18.     <nav class="skip">
  19.         <a href="#" class="prev">&lt;</a>
  20.         <a href="#" class="next">&gt;</a>
  21.     </nav>
  22. </div>
  • 续写 js 图片轮播
  1. <script>
  2.     // 图片组
  3.     const imgs = document.querySelectorAll(".container > .imgs img");
  4.     // 按钮组
  5.     const btnGroup = document.querySelector(".container > .btns");
  6.     // 翻页按钮
  7.     const skip = document.querySelector(".container > .skip");
  9.     // 根据图片组imgs的图片数量向按钮组btnGroup添加图片数量个按钮
  10.     function autoCreateBtns(btnGroup, imgs) {
  11.         imgs.forEach((img, i) => {
  12.             // 创建并设置 a 标签属性
  13.             let a = document.createElement('a');
  14.             a.href = "#";
  15.             a.dataset.index = i;
  16.             // 图片处以激活时，对应的按钮也处于激活状态
  17.             if (img.classList.contains('active')) {
  18.                 a.classList.add('active');
  19.             }
  20.             // 追加到父级元素
  21.             btnGroup.appendChild(a);
  22.         });
  23.     }
  24.     autoCreateBtns(btnGroup, imgs)
  26.     // 获取按钮组
  27.     const btns = document.querySelectorAll(".container > .btns > *");
  28.     // 获取激活的元素(图片|按钮)
  29.     function getActiveEle(eles) {
  30.         // 转为数组过滤出包含 active 类的元素出队
  31.         return [...eles].filter(ele => ele.classList.contains('active')).shift();
  32.     }
  34.     // 设置激活的元素
  35.     function setActiveEle(index) {
  36.         //第 index 图片和按钮激活时
  37.         [imgs, btns].forEach(eles => eles.forEach(ele => {
  38.             // 取消当前元素激活
  39.             if (ele.classList.contains('active')) ele.classList.remove('active');
  40.             // 激活第 index 的图片和按钮
  41.             if (index === ele.dataset.index) ele.classList.add('active');
  42.         }
  43.         ));
  44.     }
  46.     // 为每个小按钮添加点击事件
  47.     btns.forEach(btn => {
  48.         btn.addEventListener('click', ev => setActiveEle(ev.target.dataset.index));
  49.     });
  51.     // 为prev前翻页元素添加事件监听器
  52.     skip.firstElementChild.addEventListener('click', skipImg);
  53.     // 为next后翻页元素添加事件监听器
  54.     skip.lastElementChild.addEventListener('click', skipImg);
  56.     // 前后prev|next翻页点击事件的回调函数
  57.     function skipImg(ev) {
  58.         // 计算前后翻页点击时，图片组的图片或按钮组的按钮，处以激活状态的位置索引
  59.         let posIndex = parseInt(getActiveEle(imgs).dataset.index);
  60.         //console.log(posIndex);
  61.         // 向前翻页时（包含一个css类prev）
  62.         if (ev.target.classList.contains('prev')) {
  63.             if (0 === posIndex) {
  64.                 // 原激活索引是 0，表示前面没有图片，则赋值最后一个图片的位置索引
  65.                 posIndex = imgs.length - 1;
  66.             } else {
  67.                 // 否则，表示前面还有图片，赋值前一个图片的位置索引，供前翻页激活
  68.                 posIndex -= 1;
  69.             }
  70.         }
  71.         // 向后翻页时（包含一个css类next）
  72.         if (ev.target.classList.contains('next')) {
  73.             if (posIndex === imgs.length - 1) {
  74.                 // 原激活索引是最后一个图片，表示后面没有没有图片了，赋值第一个图片的索引
  75.                 posIndex = 0;
  76.             } else {
  77.                 // 否则，表示后面还有图片，赋值后一个图片的位置索引，供后翻页激活
  78.                 posIndex += 1;
  79.             }
  80.         }
  81.         // 激活第 posIndex 元素(图片|按钮)
  82.         //console.log(posIndex);
  83.         setActiveEle(posIndex.toString());
  84.     }
  86.     // 定义一个点击事件
  87.     let clickEvent = new Event('click');
  88.     // 页面载入时，为next后翻页元素，定时器间隔派发点击事件
  89.     let timer = setInterval(() => skip.lastElementChild.dispatchEvent(clickEvent), 2000);
  91.     // 事件代理，鼠标移入/出轮播区时，事件派发执行
  92.     const slider = document.querySelector('.container');
  93.     // 鼠标移出轮播区域自动轮播
  94.     slider.addEventListener('mouseout', () => {
  95.         // 为next后翻页元素，定时器间隔派发点击事件
  96.         timer = setInterval(() => skip.lastElementChild.dispatchEvent(clickEvent), 2000);
  97.     });
  98.     // 鼠标移入轮播区域停止轮播
  99.     slider.addEventListener('mouseover', () => {
  100.         // 清除定时器
  101.         clearInterval(timer);
  102.     });
  104. </script>

简单封装

  • 新建 html 文档，简单封装
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>轮播图</title>
  8.     <link rel="stylesheet" href="banner/style.css" />
  9. </head>
  11. <body>
  12.     <div class="container">
  13.         <!-- 1. 图片组，使用封装，去除自定义属性索引 -->
  14.         <nav class="imgs">
  15.             <a href="#"><img src="banner/banner1.jpg" alt="" /></a>
  16.             <a href="#"><img src="banner/banner2.jpg" alt="" /></a>
  17.             <a href="#"><img src="banner/banner3.jpg" alt="" /></a>
  18.             <a href="#"><img src="banner/banner4.jpg" alt="" /></a>
  19.         </nav>
  20.         <!-- 2. 图片小按钮 -->
  21.         <nav class="btns"></nav>
  22.         <!-- 3. 翻页 -->
  23.         <nav class="skip">
  24.             <a href="#">&lt;</a>
  25.             <a href="#">&gt;</a>
  26.         </nav>
  27.     </div>
  29.     <script>
  31.         class Slider {
  32.             // 构造方法
  33.             constructor(slider = { container: '.container', slide: '.slide' }) {
  34.                 this.slider = slider;
  35.                 // 外层容器
  36.                 this.container = this.slider['container'];
  37.                 // 轮播的项目
  38.                 this.slide = this.slider['slide'];
  39.                 // 按钮组
  40.                 this.btns = 'undefined' !== typeof this.slider['btns'] ? this.slider['btns'] : '.btns';
  41.                 // 前后翻页
  42.                 this.skip = 'undefined' !== typeof this.slider['skip'] ? this.slider['skip'] : '.skip';
  43.                 // 事件类型
  44.                 this.event = 'undefined' !== typeof this.slider['event'] ? this.slider['event'] : 'click';
  45.                 // 载入时自动播放
  46.                 this.autoplay = 'undefined' !== typeof this.slider['autoplay'] ? this.slider['autoplay'] : true;
  47.                 // 播放延时
  48.                 this.time = 'undefined' !== typeof this.slider['time'] ? this.slider['time'] : 2000;
  49.                 // 初始化并执行
  50.                 this.init();
  51.             }
  53.             // 执行函数
  54.             init() {
  55.                 // 项目组
  56.                 const imgs = document.querySelectorAll(this.slide);
  57.                 // 按钮组
  58.                 const btnGroup = document.querySelector(this.btns);
  59.                 // 翻页按钮
  60.                 const skip = document.querySelector(this.skip);
  62.                 // 为项目组每个项目添加自定义属性索引
  63.                 imgs.forEach((img, i) => {
  64.                     img.dataset.index = i;
  65.                     if (i === 0) img.classList.add('active');
  66.                 });
  68.                 // 根据项目数量向按钮组btnGroup添加项目数量个按钮
  69.                 autoCreateBtns(btnGroup, imgs);
  70.                 function autoCreateBtns(btnGroup, imgs) {
  71.                     imgs.forEach((img, i) => {
  72.                         // 创建并设置 a 标签属性
  73.                         let a = document.createElement('a');
  74.                         a.href = "#";
  75.                         a.dataset.index = i;
  76.                         // 图片处以激活时，对应的按钮也处于激活状态
  77.                         if (img.classList.contains('active')) {
  78.                             a.classList.add('active');
  79.                         }
  80.                         // 追加到父级元素
  81.                         btnGroup.appendChild(a);
  82.                     });
  83.                 }
  85.                 // 获取按钮组
  86.                 const btns = Array.from(document.querySelector(this.btns).children);
  87.                 // 获取激活的项目
  88.                 function getActiveEle(eles) {
  89.                     // 转为数组过滤出包含 active 类的元素出队
  90.                     return [...eles].filter(ele => ele.classList.contains('active')).shift();
  91.                 }
  93.                 // 设置激活的元素
  94.                 function setActiveEle(index) {
  95.                     //第 index 图片和按钮激活时
  96.                     [imgs, btns].forEach(eles => eles.forEach(ele => {
  97.                         // 取消当前元素激活
  98.                         if (ele.classList.contains('active')) ele.classList.remove('active');
  99.                         // 激活第 index 的图片和按钮
  100.                         if (index === ele.dataset.index) ele.classList.add('active');
  101.                     }
  102.                     ));
  103.                 }
  105.                 // 为每个小按钮添加点击事件
  106.                 btns.forEach(btn => {
  107.                     btn.addEventListener(this.event, ev => setActiveEle(ev.target.dataset.index));
  108.                 });
  110.                 // 为prev前翻页元素添加事件监听器
  111.                 skip.firstElementChild.classList.add('prev');
  112.                 skip.firstElementChild.addEventListener(this.event, skipImg);
  113.                 // 为next后翻页元素添加事件监听器
  114.                 skip.lastElementChild.classList.add('next');
  115.                 skip.lastElementChild.addEventListener(this.event, skipImg);
  117.                 // 前后prev|next翻页点击事件的回调函数
  118.                 function skipImg(ev) {
  119.                     // 计算前后翻页点击时，图片组的图片或按钮组的按钮，处以激活状态的位置索引
  120.                     let posIndex = parseInt(getActiveEle(imgs).dataset.index);
  121.                     //console.log(posIndex);
  122.                     // 向前翻页时（包含一个css类prev）
  123.                     if (ev.target.classList.contains('prev')) {
  124.                         if (0 === posIndex) {
  125.                             // 原激活索引是 0，表示前面没有图片，则赋值最后一个图片的位置索引
  126.                             posIndex = imgs.length - 1;
  127.                         } else {
  128.                             // 否则，表示前面还有图片，赋值前一个图片的位置索引，供前翻页激活
  129.                             posIndex = posIndex - 1;
  130.                         }
  131.                     }
  132.                     // 向后翻页时（包含一个css类next）
  133.                     if (ev.target.classList.contains('next')) {
  134.                         if (posIndex === imgs.length - 1) {
  135.                             // 原激活索引是最后一个图片，表示后面没有没有图片了，赋值第一个图片的索引
  136.                             posIndex = 0;
  137.                         } else {
  138.                             // 否则，表示后面还有图片，赋值后一个图片的位置索引，供后翻页激活
  139.                             posIndex = posIndex + 1;
  140.                         }
  141.                     }
  142.                     // 激活第 posIndex 元素(图片|按钮)
  143.                     //console.log(posIndex);
  144.                     setActiveEle(posIndex.toString());
  145.                 }
  147.                 // 定义一个点击事件
  148.                 let clickEvent = new Event(this.event);
  149.                 // 页面载入时，为next后翻页元素，定时器间隔派发点击事件
  150.                 let timer = null;
  151.                 // 如果载入时，允许进入自动播放
  152.                 if (this.autoplay) {
  153.                     timer = setInterval(() => skip.lastElementChild.dispatchEvent(clickEvent), this.time);
  154.                 }
  156.                 // 事件代理，鼠标移入/出轮播区时，事件派发执行
  157.                 const slider = document.querySelector('.container');
  158.                 // 鼠标移出轮播区域自动轮播
  159.                 slider.addEventListener('mouseout', () => {
  160.                     // 为next后翻页元素，定时器间隔派发点击事件
  161.                     timer = setInterval(() => skip.lastElementChild.dispatchEvent(clickEvent), this.time);
  162.                 });
  163.                 // 鼠标移入轮播区域停止轮播
  164.                 slider.addEventListener('mouseover', () => {
  165.                     // 清除定时器
  166.                     clearInterval(timer);
  167.                 });
  168.             }
  169.         }
  171.         // 调用
  172.         let slider = new Slider({
  173.             container: '.container', // 外层容器
  174.             slide: '.container > .imgs img', // 轮播的项目
  175.             btns: '.container > .btns', // 生成按钮组的容器css
  176.             skip: '.container > .skip', // 前后翻页的css
  177.             event: 'click', // 事件类型
  178.             autoplay: true, // 载入时是否允许自动播放
  179.             time: 2000 // 延时间隔时间
  180.         });
  182.     </script>
  183. </body>
  185. </html>
  • 页面载入播放图

轮播图

图片懒加载

  • body 中国添加 html 和 js
  1. <p><img src="http://pic.netbian.com/static/img/logo.jpg"
  2.         data-src="http://pic.netbian.com/uploads/allimg/190824/212516-1566653116f355.jpg" alt=""></p>
  3. <p><img src="http://pic.netbian.com/static/img/logo.jpg"
  4.         data-src="http://pic.netbian.com/uploads/allimg/201228/214304-16091629844780.jpg" alt=""></p>
  5. <p><img src="http://pic.netbian.com/static/img/logo.jpg"
  6.         data-src="http://pic.netbian.com/uploads/allimg/200618/005100-1592412660f973.jpg" alt=""></p>
  7. <p><img src="http://pic.netbian.com/static/img/logo.jpg"
  8.         data-src="http://pic.netbian.com/uploads/allimg/180826/113958-1535254798fc1c.jpg" alt=""></p>
  9. <p><img src="http://pic.netbian.com/static/img/logo.jpg"
  10.         data-src="http://pic.netbian.com/uploads/allimg/180315/110404-152108304476cb.jpg" alt=""></p>
  11. <p><img src="http://pic.netbian.com/static/img/logo.jpg"
  12.         data-src="http://pic.netbian.com/uploads/allimg/170609/123945-14969831856c4d.jpg" alt=""></p>
  13. <p><img src="http://pic.netbian.com/static/img/logo.jpg"
  14.         data-src="http://pic.netbian.com/uploads/allimg/200410/213246-1586525566e909.jpg" alt=""></p>
  15. <p><img src="http://pic.netbian.com/static/img/logo.jpg"
  16.         data-src="http://pic.netbian.com/uploads/allimg/190917/183634-15687165942ef2.jpg" alt=""></p>
  17. <p><img src="http://pic.netbian.com/static/img/logo.jpg"
  18.         data-src="http://pic.netbian.com/uploads/allimg/180803/084010-15332568109b5b.jpg" alt=""></p>
  19. <p><img src="http://pic.netbian.com/static/img/logo.jpg"
  20.         data-src="http://pic.netbian.com/uploads/allimg/190518/174718-15581728388724.jpg" alt=""></p>
  22. <script>
  23.     const imgs = document.querySelectorAll('p > img');
  24.     // 视口高度
  25.     let clientHeight = document.documentElement.clientHeight;
  26.     // 窗口滚动监听
  27.     window.addEventListener('scroll', lazyload);
  28.     // 页面加载完成执行
  29.     window.addEventListener('load', lazyload);
  30.     // 回调函数
  31.     function lazyload() {
  32.         // 滚动高度
  33.         let scrollTop = document.documentElement.scrollTop;
  34.         // 图片遍历
  35.         imgs.forEach(img => {
  36.             // 图片高度 < 视口高度 + 滚动高度，图片进入视口
  37.             if (img.offsetTop < clientHeight + scrollTop) {
  38.                 img.src = img.dataset.src;
  39.             }
  40.         });
  41.     }
  42. </script>
  • 页面从第3个图片起，未进入视口范围，显示默认替代 logo 图片

懒加载

上一条：变量与常量；函数与匿名函数；闭包；箭头函数；高阶函数下一条：幻灯片完善：为翻页按钮添加功能 , 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放，选项卡, 懒加载二选一
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多