完整轮播图实现过程

骑猪看日落 2022-06-18 09:52 123阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
                border: 0;
            }
    
            .all {
                width: 500px;
                height: 200px;
                padding: 7px;
                border: 1px solid #ccc;
                margin: 100px auto;
                position: relative;
            }
    
            .screen {
                width: 500px;
                height: 200px;
                /*overflow: hidden;*/
                position: relative;
            }
    
            .screen li {
                width: 500px;
                height: 200px;
                overflow: hidden;
                float: left;
            }
    
            .screen ul {
                position: absolute;
                left: 0;
                top: 0px;
                width: 3000px;
            }
    
            .all ol {
                position: absolute;
                right: 10px;
                bottom: 10px;
                line-height: 20px;
                text-align: center;
            }
    
            .all ol li {
                float: left;
                width: 20px;
                height: 20px;
                background: #fff;
                border: 1px solid #ccc;
                margin-left: 10px;
                cursor: pointer;
            }
    
            .all ol li.current {
                background: yellow;
            }
    
            #arr {
                display: none;
            }
    
            #arr span {
                width: 40px;
                height: 40px;
                position: absolute;
                left: 5px;
                top: 50%;
                margin-top: -20px;
                background: #000;
                cursor: pointer;
                line-height: 40px;
                text-align: center;
                font-weight: bold;
                font-family: '黑体';
                font-size: 30px;
                color: #fff;
                opacity: 0.3;
                border: 1px solid #fff;
            }
    
            #arr #right {
                right: 5px;
                left: auto;
            }
        </style>
    </head>
    <body>
    <div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="images/1.jpg" width="500" height="200"/></li>
                <li><img src="images/2.jpg" width="500" height="200"/></li>
                <li><img src="images/3.jpg" width="500" height="200"/></li>
                <li><img src="images/4.jpg" width="500" height="200"/></li>
                <li><img src="images/5.jpg" width="500" height="200"/></li>
            </ul>
            <ol>
                
            </ol>
        </div>
        <div id="arr"><span id="left"><</span><span id="right">></span></div>
    </div>
    <script>
        //1 获取元素
        var box = document.getElementById("box");
        var screenBox = box.children[0];//可视区域
        var imgWid = screenBox.offsetWidth;//图片宽度
        var ul = screenBox.children[0];//运动的列表
        var ol = screenBox.children[1];//底部操作的小方块
        var arrBox = box.children[1];//箭头的父盒子
        var arrLeft = arrBox.children[0];
        var arrRight = arrBox.children[1];
        var num = 0;        //用来记录每次鼠标点击图片运动的张数
        var ulLis = ul.children;
        var timer = null;
        var olLi;
        //根据初始图片张数动态创建小方块
        for(var i = 0;  i < ulLis.length; i++){
             olLi = document.createElement('li');
            olLi.innerHTML = i+1;
            ol.appendChild(olLi);
        }
    
    //    获取每个每个小方块并给它们添加点击事件
        var olLis = ol.children;
        olLis[0].className = 'current'; //初始化给第一个方块改背景颜色；
        for(var i = 0; i < olLis.length; i++){
    
            olLis[i].index = i;     //给每个方块设置一个自定义索引,等会用来计算ul移到的距离；
    
            olLis[i].onclick = function(){
    
                if(num == ulLis.length - 1){  //当图片运动到最后假的一张时，
    //                                            此时小方块在1位置上 ，要是再点1图片会退回去，所以这里我们点1时让图片快速抽回
                    ul.style.left = '0px';
                }
    
                for(var i = 0; i < olLis.length; i++){
    
                    olLis[i].className = '';  //清空所有小方块类名
                }
                this.className = 'current'; //当前点击的小方块改变背景
                animate(ul,  -this.index * imgWid);
                num = this.index; //让左右箭头点击和小方块相对应；
            }
        }
    
    //        克隆第一张图添加到ul作为最后一张来实现无缝滚动
            var firstPic = ul.children[0].cloneNode(true);
            ul.appendChild(firstPic);
    
    //    右箭头点击控制图片滚动
            arrRight.onclick = function(){
    
                if(num == ulLis.length - 1){    //当图片跑到假的那张后，再点击时，ul快速抽回到第一张实现无缝滚动
                    num = 0;
                    ul.style.left = '0px';
                }
                num++                   //每点击一次，就记录一次；
                animate(ul,-num * imgWid);  //调用运动函数让图片运动
    
                for(var i = 0; i < olLis.length; i++){
                    olLis[i].className = '';        //右箭头点击时，让小方块的背景也跟着相应运动；
                }
    
                if(num == ulLis.length - 1){
                    olLis[0].className = 'current'; //当图片运动到最后一张时，由于小方块比图片个数少一个，所以我们让它从0开始
                }
                olLis[num].className = 'current';
            }
    
    
    //    左箭头点击控制图片滚动
        arrLeft.onclick = function(){
    
            if(num == 0){    //当图片跑到假的那张后，再点击时，ul快速抽回到第一张实现无缝滚动
                num = ulLis.length - 1;
                ul.style.left = -num * imgWid +  'px';  //快速抽回到最后一张
            }
            num--;                  //减减后再运动 依然是第五张图片；
            animate(ul,-num * imgWid);  //调用运动函数让图片运动
    
            for(var i = 0; i < olLis.length; i++){
                olLis[i].className = '';        //左箭头点击时，让小方块的背景也跟着相应运动；
            }
            olLis[num].className = 'current';
        }
    
    
        //    鼠标移入移出盒子控制箭头的显示和影藏
        box.onmouseover = function(){
            arrBox.style.display = 'block';
        }
        box.onmouseout = function(){
            arrBox.style.display = 'none';
        }
        //简单的缓动animate
        function animate(tag, target) {
            clearInterval(tag.timer);//放止加速
            tag.timer = setInterval(function () {
                var leader = tag.offsetLeft;
                var step = (target - leader) / 10;
                //设置取整，保证元素可以进行运动
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader = leader + step;
                tag.style.left = leader + "px";
                if (leader == target) {
       //清除定时器
                    clearInterval(tag.timer);
                }
            }, 20);
        }
    
    </script>
    </body>
    </html>