devbox
Guff_9hys
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Html+Css+JavaScript实现完整的轮播图功能_轮播图怎么制作html

作者：Guff_9hys | 2024-07-09 21:55:25

赞

踩

轮播图怎么制作html

概要

这个案例具备常见轮播图完整的功能，大家可以根据自己的需求去修改； 代码可以直接复制运行，需要安装sass

主要功能：

（1）鼠标移入轮播图，左右两边的按钮出现，离开则隐藏按钮；(CSS完成）

（2）点击左侧按钮，图片向右播放一张，右侧按钮同理；

（3）图片播放的同时，下面的小圆圈也会随之变化；

（4）点击小圆圈，播放相应的图片；

（5）鼠标移入小圆圈，播放相应的图片（看需求是要点击还是移入，把click改成mouseenter）

（6）鼠标移出轮播图自动播放图片

（7）鼠标移入轮播图暂停播放图片

页面效果：

大家觉得有帮助的话可以点个赞支持下，谢谢啦~

完整代码：

一、Css样式，使用sass预编译器

  1. <style >
  2.     /* 默认样式 */
  3.     * {
  4.         margin: 0;
  5.         padding: 0;
  6.  
  7.         a {
  8.             text-decoration: none;
  9.         }
  10.         li {
  11.             list-style: none;
  12.         }
  13.     }
  14.  
  15.     /* 轮播图盒子 */
  16.     .box {
  17.         width: 600px;
  18.         height: 350px;
  19.         margin: 70px auto;
  20.         position: relative;
  21.         overflow: hidden;
  22.  
  23.         /* 上、下一页 */
  24.         .prev,
  25.         .next {
  26.             opacity: 0;
  27.             display: inline-block;
  28.             cursor: pointer;
  29.             width: 50px;
  30.             height: 50px;
  31.             position: absolute;
  32.             top: 50%;
  33.             color: #d2d0d0;
  34.             z-index: 33;
  35.             text-align: center;
  36.             font-size: 40px;
  37.             transform: translateY(-25px);
  38.         }
  39.  
  40.         /* 上一页不同的属性 */
  41.         .prev {
  42.             left: 0;
  43.             border-radius: 0 25% 25% 0;
  44.         }
  45.  
  46.         /* 下一页不同的属性 */
  47.         .next {
  48.             right: 0;
  49.             border-radius: 25% 0 0 25%;
  50.         }
  51.  
  52.         /* 图片容器 */
  53.         .images {
  54.             position: absolute;
  55.             top: 0;
  56.             left: 0;
  57.             width: 1000%;
  58.  
  59.             /* 图片 */
  60.             li {
  61.                 list-style: none;
  62.                 float: left;
  63.  
  64.                 img {
  65.                     width: 600px;
  66.                     height: 350px;
  67.                 }
  68.             }
  69.         }
  70.  
  71.         /* 小圆点盒子 */
  72.         .dots {
  73.             position: absolute;
  74.             bottom: 10px;
  75.             left: 50%;
  76.             height: 13px;
  77.             transform: translateX(-50%);
  78.             background: rgba(255, 255, 255, .3);
  79.             border-radius: 7px;
  80.             display: flex;
  81.  
  82.             /* 小圆点 */
  83.             li {
  84.                 width: 10px;
  85.                 height: 10px;
  86.                 border-radius: 50%;
  87.                 border-color: white;
  88.                 background-color: rgb(0, 0, 0, 0.2);
  89.                 margin: 2px 5px;
  90.                 cursor: pointer;
  91.             }
  92.  
  93.             /* 选择的小圆点 */
  94.             .active {
  95.                 background-color: rgb(247, 243, 243);
  96.             }
  97.         }
  98.     }
  99.  
  100.     /* 鼠标移入盒子显示上、下按钮 */
  101.     .box:hover .prev,
  102.     .box:hover .next {
  103.         opacity: 1;
  104.     }
  105.  
  106.     /* 鼠标移入上、下按钮，背景模糊 */
  107.     .box .prev:hover,
  108.     .box .next:hover {
  109.         background-color: rgba(0, 0, 0, 0.2);
  110.     }
  111. </style>

二、Html结构

  1. <body>
  2.     <div class="box">
  3.         <!-- 左箭头 -->
  4.         <a href="javascript:;" class="prev"> &lt;</a>
  5.         <!-- 右箭头 -->
  6.         <a href="javascript:;" class="next"> &gt;</a>
  7.         <ul class="images">
  8.             <li><a href="#"><img src="./src/assets/00.jpg" alt="轮播图图片"></a></li>
  9.             <li><a href="#"><img src="./src/assets/11.jpg" alt="轮播图图片"></a></li>
  10.             <li><a href="#"><img src="./src/assets/12.jpg" alt="轮播图图片"></a></li>
  11.             <li><a href="#"><img src="./src/assets/13.jpg" alt="轮播图图片"></a></li>
  12.             <li><a href="#"><img src="./src/assets/15.jpg" alt="轮播图图片"></a></li>
  13.             <li><a href="#"><img src="./src/assets/16.jpg" alt="轮播图图片"></a></li>
  14.         </ul>
  15.         <ul class="dots">
  16.             <!-- li 用js动态生成-->
  17.         </ul>
  18.     </div>
  19. </body>

三、JavaScript

  1. <script>
  2.     /* 功能需求
  3.     （1）当鼠标经过轮播图，左右两边的按钮出现，离开则隐藏按钮；(CSS完成）
  4.     （2）点击左侧按钮，图片向右播放一张，右侧同理；
  5.     （3）图片播放的同时，下面的小圆圈也会随之变化；
  6.     （4）点击小圆圈，可以播放相应的图片；
  7.     （5）鼠标移入小圆圈，可以播放相应的图片（看需求是要点击还是移入，把click改成mouseenter）
  8.     （6）鼠标移出轮播图会自动播放图片
  9.     （7）鼠标移入轮播图会暂停播放图片
  10.     */
  11.     window.addEventListener('load', function () {
  12.         // 图片的下标
  13.         var slideIndex = 0;
  14.         //circle 控制小圆圈的播放
  15.         var circle = 0;
  16.         //获取小圆圈盒子
  17.         var dots = document.querySelector('.dots');
  18.         //获取所有图片
  19.         var images = document.querySelector('.images');
  20.         //获取轮播图容器
  21.         var box = document.querySelector('.box')
  22.         //获取轮播图容器宽度
  23.         var box_width = box.offsetWidth;
  24.  
  25.         //1.获取上、下一页并添加点击事件
  26.         var prev = document.querySelector(".prev")
  27.         var next = document.querySelector(".next")
  28.         //上一页
  29.         prev.addEventListener("click", function () {
  30.             if (slideIndex == 0) {//已经第一页了，再上一页就该是最后一页
  31.                 slideIndex = images.children.length - 1
  32.                 images.style.left = -slideIndex * box_width + 'px';
  33.             }
  34.             slideIndex--;
  35.             animate(images, -slideIndex * box_width)
  36.             // 小圆圈跟随一起变化
  37.             circle--;
  38.             circle = circle < 0 ? dots.children.length - 1 : circle;
  39.             //调用函数
  40.             circleChange();
  41.         });
  42.         //下一页
  43.         next.addEventListener("click", function () {
  44.             if (slideIndex == images.children.length - 1) {//已经最后一页了，再下一页就该是第一页
  45.                 images.style.left = 0;
  46.                 slideIndex = 0;
  47.             }
  48.             slideIndex++;
  49.             animate(images, -slideIndex * box_width);
  50.             // 小圆圈跟随一起变化
  51.             circle++;
  52.             if (circle == dots.children.length) {
  53.                 circle = 0;
  54.             }
  55.             circleChange();
  56.         });
  57.  
  58.         // 2.动态生成小圆圈 有几张图片，就生成几个小圆圈
  59.         var dots = document.querySelector('.dots');
  60.         for (var i = 0; i < images.children.length; i++) {
  61.             //创建一个小li
  62.             var li = document.createElement('li');
  63.             //记录当前小圆圈的索引号 通过创建自定义属性来做
  64.             li.setAttribute('index', i);
  65.             dots.appendChild(li);
  66.             //小圆圈的排他思想 在生成小圆圈的同时绑定点击事件
  67.             li.addEventListener('click', function () {
  68.                 for (var i = 0; i < dots.children.length; i++) {
  69.                     dots.children[i].className = ' '; //清空样式
  70.                 }
  71.                 this.className = 'active';
  72.                 //点击小圆圈，移动图片，本质移动的是ul
  73.                 //ul 的移动距离 就是小圆圈的索引号 * 图片的宽度 注意是负值
  74.                 // 当我们点击了某个小li 就拿到它的index属性
  75.                 var index = this.getAttribute('index');
  76.                 //当我们点击了某个小li 就要把这个小li 的index给slideIndex
  77.                 slideIndex = index;
  78.                 circle = index;
  79.                 animate(images, -slideIndex * box_width);
  80.             })
  81.         }
  82.         //把dots 里面的第一个小li设置类名为 active
  83.         dots.children[0].className = 'active';
  84.         // 实现滑动到最后一张照片时 可以平滑地过渡到第一张，克隆第一张图片 放在ul最后面，在其后克隆小圆点不会多
  85.         var first = images.children[0].cloneNode(true);
  86.         images.appendChild(first);
  87.  
  88.         //3.点击小圆圈添加激活样式
  89.         function circleChange() {
  90.             for (var i = 0; i < dots.children.length; i++) {
  91.                 dots.children[i].className = '';
  92.             }
  93.             dots.children[circle].className = 'active';
  94.         }
  95.  
  96.         //定时器自动播放3S
  97.         var timer = setInterval(function () {
  98.             next.click();
  99.         }, 3000);
  100.  
  101.         //3.绑定鼠标移入移出事件
  102.         //鼠标移入，停止播放,清除计时器
  103.         box.addEventListener('mouseenter', function () {
  104.             clearInterval(timer);
  105.             timer = null;//清除计时器
  106.         });
  107.         //鼠标离开，轮播图自动切换 相当于点击右箭头
  108.         box.addEventListener('mouseleave', function () {
  109.             timer = setInterval(function () {
  110.                 // 手动调用事件
  111.                 next.click();
  112.             }, 3000);
  113.         });
  114.  
  115.         //轮播图播放动画
  116.         function animate(obj, target, callback) {
  117.             //让元素只有一个定时器在执行，需要清除以前的定时器
  118.             clearInterval(obj.timer);
  119.             obj.timer = setInterval(function () {
  120.                 var step = (target - obj.offsetLeft) / 10;
  121.                 step = step > 0 ? Math.ceil(step) : Math.floor(step);
  122.                 if (obj.offsetLeft == target) {
  123.                     //停止动画 本质是停止定时器
  124.                     clearInterval(obj.timer)
  125.                     //回调函数写到定时器结束位置
  126.                     if (callback) {
  127.                         callback();
  128.                     }
  129.                 }
  130.                 //把每次加1这个步长值改为一个慢慢变小的值
  131.                 obj.style.left = obj.offsetLeft + step + 'px';
  132.             }, 15);
  133.         }
  134.  
  135.         next.click();
  136.     })
  137. </script>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/803778
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号