JavaScript - 轮播图

2022年09月27日 · 笔记 · 78次阅读

轮播图的几点功能:

  1. 鼠标移入 显示上一张、下一张,移出 则隐藏。
  2. 点击上下一张,自动切换显示图片,做到有动画效果、无缝切换。
  3. 鼠标移出时自动每3秒切换图片,鼠标移入时则不自动切换。
  4. 移动图片时下方小圆点也跟随改变选中的图片位置。
  5. 可以点击下方小圆点,切换图片。

直接放自己写的例子:

  1. 首先网页部分及css,自己画的有点潦草...
    css部分

    <style>
         * {
             margin: 0;
             padding: 0;
         }
    
         ol {
             list-style: none;
             position: absolute;
             left: 50%;
             bottom: 0;
             transform: translate(-55%, 0);
         }
    
         ol li {
             display: inline-block;
             width: 10px;
             height: 10px;
             background: rgba(91, 66, 66, 0.3);
             border-radius: 50%;
             border: solid 1px black;
             cursor: pointer;
         }
    
         .current {
             display: inline-block;
             width: 10px;
             height: 10px;
             background-color: white;
             border-radius: 50%;
             border: solid 1px black;
         }
    
         .banner {
             position: relative;
             margin: 50px auto 0 auto;
             width: 520px;
             height: 326px;
             overflow: hidden;
         }
    
         .banner ul {
             position: absolute;
             left: 0;
             top: 0;
             list-style: none;
             width: 550%;
             height: 100%;
             z-index: -1;
         }
    
         .banner #banner_pic li {
             float: left;
    
         }
    
         .banner a {
             display: inline-block;
             cursor: default;
         }
    
         .banner span {
             display: inline-block;
             width: 25px;
             height: 25px;
             text-align: center;
             font-size: 20px;
             line-height: 25px;
             cursor: pointer;
             color: white;
             background: rgba(0, 0, 0, .3);
         }
    
         .banner #next {
             display: none;
             position: absolute;
             left: 0;
             top: 150px;
             border-radius: 25%;
         }
    
         .banner #forward {
             display: none;
             position: absolute;
             right: 0;
             top: 150px;
             border-radius: 25%;
         }
    
         img {
             display: inline-block;
             width: 520px;
             height: 326px;
         }
    
         .circle li {
             margin: 0 2px 0 2px;
         }
     </style>

    html部分

    <body>
    <div class="banner">
     <span id="next"><</span>
     <span id="forward">></span>
    
     <ul id="banner_pic">
         <li>
             <a href="JavaScript:">
                 <img src="./updatas/1.png" alt="图">
             </a>
         </li>
         <li>
             <a href="JavaScript:">
                 <img src="./updatas/2.png" alt="图">
             </a>
         </li>
         <li>
             <a href="JavaScript:">
                 <img src="./updatas/3.png" alt="图">
             </a>
         </li>
         <li>
             <a href="JavaScript:">
                 <img src="./updatas/4.png" alt="图">
             </a>
         </li>
     </ul>
     <ol class="circle">
    
     </ol>
    </div>
    </body>
  2. JavaScript部分

     let main_box = document.querySelector(".banner");
     let to_left = main_box.children[0];
     let to_right = main_box.children[1];
     let now_pic = 0;
     let pic_count = 0;
     let pic_ul = document.querySelector("#banner_pic");
     let ol = document.querySelector(".circle");
    
     let ThrottleValve = false;
     /**
      * 自动下一章操作
      */
     const auto_fun = function () {
         if (ThrottleValve) return;
         else ThrottleValve = true;
    
         if (now_pic > pic_count - 1)
             now_pic = 0;
         else if (now_pic === pic_count - 1) {//无缝处理
             new EaseAnimation(pic_ul, (now_pic + 1) * -520, function () {
                 pic_ul.style.left = 0 + "px";
                 ThrottleValve = false;//节流阀
             });
             now_pic = 0;
             for (let i = 0; i < ol.children.length; i++) {
                 ol.children[i].className = "";
             }
             ol.children[now_pic].className = "current";
             return;
         } else
             now_pic++;
    
         new EaseAnimation(pic_ul, now_pic * -520, function () {
             ThrottleValve = false;//节流阀
         });
         for (let i = 0; i < ol.children.length; i++) {
             ol.children[i].className = "";
         }
         ol.children[now_pic].className = "current";
     }
     /**
      * 选中一张操作
      */
     const TogglePicture = function (i) {
         now_pic = i;
         new EaseAnimation(pic_ul, now_pic * -520);
         for (let i = 0; i < ol.children.length; i++) {
             ol.children[i].className = "";
         }
         ol.children[now_pic].className = "current";
     }
    
     //对齐小圆点
     for (let i = 0; i < pic_ul.children.length; i++) {
         let li = document.createElement("li");
         if (i === now_pic) {
             li.className = "current";
         }
         li.addEventListener("click", function () {
             TogglePicture(i);
         });
         ol.appendChild(li)
         pic_count++;
     }
    
     //实现无缝切换
     //1. 拷贝第一张复制到最后
     let pic_start = pic_ul.children[0].cloneNode(true);
     pic_ul.appendChild(pic_start)
    
    
     let auto_timer = setInterval(auto_fun, 3000);
     TogglePicture(now_pic);
     main_box.addEventListener("mouseenter", function () {
         to_left.style.display = "block";
         to_right.style.display = "block";
         clearInterval(auto_timer);
     })
    
     main_box.addEventListener("mouseleave", function () {
         main_box.children[0].style.display = "none";
         main_box.children[1].style.display = "none";
         auto_timer = setInterval(auto_fun, 3000);
     })
    
     to_left.addEventListener("click", function () {
         if (ThrottleValve) return;
         else ThrottleValve = true;
    
         if (now_pic < 0)
             now_pic = pic_count - 1;
         if (now_pic === 0) {//无缝处理
             pic_ul.style.left = pic_count * -520 + "px";
             now_pic = pic_count - 1;
         } else
             now_pic--;
         console.log(now_pic)
         new EaseAnimation(pic_ul, now_pic * -520, function () {
             ThrottleValve = false;
         });
         for (let i = 0; i < ol.children.length; i++) {
             ol.children[i].className = "";
         }
         ol.children[now_pic].className = "current";
     })
    
     to_right.addEventListener("click", function () {
         auto_fun();
     })
    
  3. 还需要js外部文件的一个函数:

    /**
     * 缓动动画
     * @param obj 目标对象
     * @param target 目标位置
     * @param callback 回调函数
     * @constructor
     */
    function EaseAnimation(obj, target, callback) {
     clearInterval(obj.timer);
     obj.timer = setInterval(function () {
         if (obj.offsetLeft === target) {
             clearInterval(obj.timer);
             callback && callback();
         } else {
             let step = (target - obj.offsetLeft) / 10;
             step = step > 0 ? Math.ceil(step) : Math.floor(step);
             obj.style.left = obj.offsetLeft + step + "px";
         }
     }, 20)
    }

B站课程中将下面的圆点索引和第几张图分开了,我不是按照课程上的写的。
我把图片和圆点使用同一个索引,将两者联系在一起。
轮播图前面还是挺简单的,但是无缝切换的要求给我绕半天....
注意:
当我们过快的点击切换图片时,动画效果会不好,所以我们需要节流阀
利用一个flag标志,来控制用户过快的行为,当用户切换图片时关闭阀门,不允许用户再进行操作,我们开始执行动画效果展示,当动画完成时再将阀门打开。
这就是原生的JavaScript轮播图。

标签:JavaScript

最后编辑于:2022-09-27 16:15

评论

Lover

搜一搜

云资源站点