JavaScript - 轮播图 | 小夏的猪窝

轮播图的几点功能：

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

直接放自己写的例子：

首先网页部分及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>

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();
 })

还需要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 - 轮播图

最新文章

最近更新

热门文章

标签云

Lover

搜一搜