用运动框架写轮播图

轮播图

上期我们讲到了运动框架，这期就用封装的运动框架来写轮播图，js封装的运动框架引用代码放在文末自取

1. 首先来写基本的样式

• css样式

  *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .father{
            width: 500px;
            height: 300px;
            position: relative;
            /* overflow: hidden; */
            margin: 200px auto;
        }
        .father ul{
            width: 2500px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .father ul li{
            width: 500px;
            height: 300px;
            float: left;
        }
        .father ul li img{
            width: 100%;
            height: 100%;
        }
        .father .btn{
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            color: white;
            background-color: #000;
            line-height: 40px;
            text-align: center;
            opacity: 0.2;
        }
        .leftbtn{
            left: 0;
        }
        .rightbtn{
            right: 0;
        }
        .father .son{
            position: absolute;
            bottom: 10px;
            text-align: center;
            width: 100%;
        }
        .father .son span{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ccc;
            margin-right: 10px;
        }
        .father .son .active{
            background-color: tomato;
        }
        .btn:hover{
            opacity: 1;
        }

• html代码

    <div class="father">
        <ul class="ulone">
            <li><img src="./f1.jpg" alt=""></li>
            <li><img src="./f2.jpg" alt=""></li>
            <li><img src="./f3.jpg" alt=""></li>
            <li><img src="./f4.jpg" alt=""></li>
            <li><img src="./f1.jpg" alt=""></li>
        </ul>
        <div class="btn leftbtn">&lt;</div>
        <div class="btn rightbtn">&gt;</div>
        <div class="son">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

—逻辑：
①首先让图片成为一排 浮动起来

.father ul li{
            //width: 500px;
            //height: 300px;
            float: left;
        }

②让那个元素移动起来呢，是ul还是li肯定是ul，怎么让元素移动起来肯定是要用到定位

 .father ul{
            //width: 2500px;
            //height: 300px;
            position: absolute;
            left: 0;//后期用于js获取style样式
            top: 0; //后期用于js获取style样式
        }

③可以让元素移动了，哪改变ul什么值可以让图片移动起来，当然是left值，所以上面样式里面写left0就很有必要了

 left: 0;//后期用于js获取style样式

2. js代码包括了左右按钮和底部小圆点

  var indexX = 0;
        var spaN = document.getElementsByTagName("span")
        // 开关门思想
        var bol = true;
        var timer= null;
        // 获取ul
        var ulone = document.getElementsByClassName("ulone")[0];
        // 获取每次移动的距离
        var RunUl = ulone.children[0].offsetWidth;
        // 计算移动的图片长度 4 
        var wid = ulone.children.length -1;
        // 获取左右按钮
        var leftbtn = document.getElementsByClassName("leftbtn")[0];
        var rightbtn = document.getElementsByClassName("rightbtn")[0];
        // 给左右按钮绑定点击事件
        leftbtn.onclick = function(){
            Runimg("前")
        }
        rightbtn.onclick = function(){
            Runimg("下")
        }
        // 自动轮播函数
         timer = setTimeout(Runimg,2500)
         function Runimg(fangxiang){
             if(bol){
                 bol = false;
                 clearTimeout(timer);
                 if(!fangxiang || fangxiang == "下"){
                    indexX++;
                     startMove(ulone,{left:ulone.offsetLeft - RunUl},function(){
                         if(ulone.offsetLeft == - wid*RunUl){
                            ulone.style.left = "0px";
                            indexX=0;
                         }
                         timer = setTimeout(Runimg,2500);
                         bol= true;
                         goshift(indexX);
                     })
                 }else if(fangxiang == "前"){
                     if(ulone.offsetLeft == 0){
                         ulone.style.left = - wid*RunUl+"px";
                         indexX= wid;
                     }
                     indexX--;
                     startMove(ulone,{left:ulone.offsetLeft+RunUl},function(){
                         timer = setTimeout(Runimg,2500)
                         bol = true;
                        goshift(indexX);
                     })
                 }
             }
         }
         function goshift(index1){
             for(var i =0;i<spaN.length;i++){
                 spaN[i].className="";
             }
             spaN[index1].className="active"
         }
         for(var i =0;i<spaN.length;i++){
             (function(index2){
                 spaN[i].onclick = function(){
                     bol = false;
                     clearTimeout(timer);
                     startMove(ulone,{left:-index2*RunUl},function(){
                         bol=true;
                         timer.setTimeout(Runimg,2500);
                         goshift(index2)
                     })
                 }
             })()
         }

—js这期讲自动轮播的代码逻辑：

①实际上的轮播图是五张图片第一张和最后一张是同一张图片，这里所以长度要减一

var wid = ulone.children.length -1;

②然后移动一次的距离要叠加上一次移动的距离是实时获取“offsetWidth”

var RunUl = ulone.children[0].offsetWidth;

③设置定时器多少秒执行一次函数代码

• 1000=1秒 这里设置2500就是2.5秒执行一次

 timer = setTimeout(Runimg,2500);

④整个自动播放的核心就是每多少秒自动叠加一次移动距离

ulone.style.left = - wid*RunUl+"px";

⑤轮播到最后一张图片时重新把ulone.style.left赋值为0因为最后一张和第一张是一样的图片用户感觉不到图片的切换

ulone.style.left = "0px";

轮播图自动轮播部分结构图

效果图

• 未溢出隐藏效果

• 溢出隐藏效果
  

- 自动轮播的效果就基本完成!!

—封装的运动框架

• 外部js文件直接引入

 function startMove(dom, attrObj,callback) { // 传入一个元素，我让元素运动城你想要的的目标
            clearInterval(dom.timer)
            var iSpeed = null,
                iCur = null;
            dom.timer = setInterval(function () {
                var bStop = true;
                for (var attr in attrObj) { 
                    if (attr == "opacity") {
                        iCur = parseFloat(getStyle(dom, attr)) * 100
                    } else {
                        iCur = parseFloat(getStyle(dom, attr))
                    }
                    iSpeed = (attrObj[attr] - iCur) / 7;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)
                    if (attr == "opacity") {
                        dom.style.opacity = (iCur + iSpeed) / 100
                    } else {
                        dom.style[attr] = iCur + iSpeed + "px"
                    }
                    if(iCur != attrObj[attr]){
                        bStop = false
                    }
                }
                if(bStop){
                    clearInterval(dom.timer)
                    typeof callback == "function" && callback()
                }
            }, 30)
        }
        function getStyle(dom,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr]
            }else{
                return dom.currentStyle[attr]
            }
        }

这期讲完了，讲得好乱！见谅！