自写无缝轮播图

---

前言

这个是一个轮播图

---

提示：
请让最后一个img和第一个img是一张图片相同
且 li数目为img数目-1；

一、无缝轮播图

让第一张和最后一张相同
type:第一张和最后一张相同；
在最后一张向下一张切换时，立刻跳到第一张 然后向第二张正常切换

二、使用步骤

1.html代码

代码如下（示例）：

  <div class="banner">
        <div class="qh">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
        <ul class="banner_img  clear">
            <li>
                <img src="img/1.png" alt="">
            </li>
            <li>
                <img src="img/2.png" alt="">
            </li>
            <li>
                <img src="img/3.png" alt="">
            </li>
            <li>
                <img src="img/4.png" alt="">
            </li>
            <li>
                <img src="img/5.png" alt="">
            </li>
            <li>
                <img src="img/6.png" alt="">
            </li>
            <li>
                <img src="img/7.png" alt="">
            </li>
            <li>
                <img src="img/1.png" alt="">
            </li>
        </ul>
    </div>

css代码

*{
	  margin:0;
	  padding:0;
}
 .banner {
            position: relative;
            margin: auto;
            margin-top: 20px;
            width: 1140px;
            height: 600px;
            border: 1px solid #000;
            overflow: hidden;
        }

        .banner ul {
            position: relative;
            width: 10000px;
        }

        .banner ul li {
            width: 1140px;
            height: 100%;
            float: left;
        }

        .banner ul img {
            width: 1140px;
            height: 100%;
            object-fit: cover;
        }

        .banner>div {
            position: absolute;
        }

        .banner .qh {
            position: absolute;
            bottom: 0;
            right: 0;
            height: 20px;
            z-index: 1;
        }

        .banner .qh div {
            margin-right: 10px;
            width: 10px;
            height: 10px;
            background: transparent;
            border: 1px solid #f0f;
            border-radius: 5px;
            float: left;
            z-index: 1;
        }
        .left{
            top: 0;
            bottom: 0;
            margin: auto;
            height: 40px;
            width: 20px;
            background: #f0f;
            left: 0;
            z-index: 1;
        }
        .right{
            top: 0;
            bottom: 0;
            margin: auto;
            height: 40px;
            background: #f0f;
            width: 20px;
            right: 0;
            z-index: 1;
        }

2.js代码

代码如下：
startMove是一个运动框架 缓冲运动；当然你也可以用其他的

     var odiv = document.querySelector(".banner");
        var oul = document.querySelector(".banner_img");
        var aimg = oul.querySelectorAll("img");
        var oqh = document.querySelector(".qh")
        var aqh_div = oqh.querySelectorAll("div");
        var alist = aimg[0].offsetWidth;
        var i=0;
        init();
        function init(){
            for (var j=0; j<aimg.length-1;j++) {
                aqh_div[j].style.background="transparent";
            }
            if (i<aimg.length-1) {
                aqh_div[i].style.background="#f0f"; 
            }else{
                aqh_div[0].style.background="#f0f"; 
            }
  
        }
        function next() {//下一张
            i++;
            let left =i*(-alist);
            if (left <= -alist * (aimg.length)) {
                oul.style.left = "0px";
                i=1;
                left =-alist*i;
            }
            startMove(oul, { left: left });
            init();
        }
        function back() {//上一张
            i--;
            let left = i*(-alist);
            if(i<0) {
                oul.style.left = (aimg.length-1)* (-alist)+"px";
                i=aimg.length-2;
                left= i*(-alist);
            }
            startMove(oul, { left: left });
            init();
        }
        function move(i) {//跳到第i张 i从0开始
            window.i=i;
            left = i* (-alist);
            startMove(oul, { left: left });
            init();
        }
        for (let i in aqh_div) {
            aqh_div[i].onclick = function () {
                move(i);
                console.log(i);
            }
        }



//下面是一个移入div暂停计时器 移出打开计时器 

        odiv.Interval = setInterval(next, 2000);
        odiv.onmouseenter = function () {
            clearInterval(odiv.Interval);
        };
        odiv.onmouseleave = function () {
            clearInterval(odiv.Interval);
            odiv.Interval = setInterval(next, 2000);
        };
//下面是两个左右切换的按钮
        var left_btn=document.querySelector(".left");
        var right_btn=document.querySelector(".right");
        left_btn.onclick=function(){
            back();
        }
        right_btn.onclick=function(){
            next();
        }




//下面是一个运动框架 第一个参数是运动的对象 第二个为json对象{要改变的属性：值}
// 第三个为运动结束后要做到事情  参数是一个函数





        /**
      *
      * @param obj 运动的对象
      * @param json {width:400, height:400}
      * @param fnEnd回调
      */
        function startMove(obj, json, fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var bStop = true;
                for (attr in json) {
                    // 1. 取得当前的值（可以是widht，height，opacity等的值）
                    var objAttr = 0;
                    if (attr == "opacity") {
                        objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                    } else {
                        objAttr = parseInt(getStyle(obj, attr));
                    }
                    // 2.计算运动速度
                    var iSpeed = (json[attr] - objAttr) / 50;//缓冲运动
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    // 3. 检测所有运动是否到达目标
                    if (objAttr != json[attr]) {
                        bStop = false;
                    }
                    if (attr == "opacity") {
                        obj.style.filter = 'alpha(opacity=' + (objAttr + iSpeed) + ')';
                        obj.style.opacity = (objAttr + iSpeed) / 100;
                    } else {
                        obj.style[attr] = objAttr + iSpeed + 'px';// 需要又.属性名的形式改成[]
                    }
                }
                if (bStop) { // 表示所有运动都到达目标值
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }
                }
            }, 10);
        }


        /**
         * 获取行间/内联/外部样式，无法设置
         * @param obj
         * @param attr
         */
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }