27--花式轮播图笔记

最新推荐文章于 2022-02-11 22:36:58 发布

lxhby520

最新推荐文章于 2022-02-11 22:36:58 发布

阅读量352

点赞数 1

分类专栏： javascript 小白

本文链接：https://blog.csdn.net/lxhby520/article/details/80645717

版权

小白同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

javascript

33 篇文章 0 订阅

订阅专栏

轮播图布局

<style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .banner{
            position: relative;
            overflow: hidden;
            margin: auto;
            width: 1000px;
        }
        .pic{
            position: relative;
            width: 1000%;
            overflow: hidden;
        }
        .pic li{
            float: left;
            width: 10%;
        }
        .pic li img{
            display: block;
            width: 100%;
        }
        .btns{
            position: absolute;
            bottom: 50%;
            width: 100%;
            height: 0;
        }
        .btns span{
            float: left;
            width: 50px;
            line-height: 50px;
            text-align: center;
            font-family:"宋体";
            font-size: 30px;
            color:red;
            background-color: rgba(255,255,255,.5);
        }
        .btns span + span{
            float: right;
        }
        .pic-num{
            position: absolute;
            width: 100%;
            bottom:20px;
            font-size: 0;
            text-align: center;
        }
        .pic-num li{
            display: inline-block;
            width: 15px;
            height: 15px;
            margin: 0 8px;
            border-radius: 50%;
            background-color:blue;
        }
        .pic-num li.on{
             background-color:pink;
        }
        .pic-num li:hover{
            background-color:pink;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="banner">
        <div class="pic">
            <ul>
                <li><a href=""><img src="images/1.jpeg" alt=""></a></li>
                <li><a href=""><img src="images/2.jpg" alt=""></a></li>
                <li><a href=""><img src="images/3.jpg" alt=""></a></li>
                <li><a href=""><img src="images/4.jpg" alt=""></a></li>
            </ul>
        </div>
        <div class="btns">
            <span>&lt;</span>
            <span>&gt;</span>
        </div>
        <ul class="pic-num">
        
        </ul>
    </div>
</body>

生成小圆点的方法

是通过for循环生成

for(var i=0;i<_length;i++){
             oPicNum.innerHTML +="<li></li>";
        }

通过数组拼接生成

var opicNumLi =new Array(_length+1);
        oPicNum.innerHTML = opicNumLi.join("<li></li>");
        console.log(oPicNum);

当图片切换时小圆点的颜色发生改变

通过index改变，将小圆点的[索引]=【index】,切换类名改变状态

opicNumLi[index].className ="on";

当移动到后一张图时，前张图对应的小圆点颜色为原来未点击状态

重新定义变量 upper

upper=0;//重新定义变量
oBtns[1].onclick =function(){
                index++;
               
                //当它大于_length  就设置为0
                index%=_length;
                opicNumLi[upper].className ="";
                opicNumLi[index].className ="on";
                upper =index;//让upper等于index-1；
                move();
            }

在index加加减减之前设置未未点击状态

oBtns[0].onclick =function(){
                opicNumLi[index].className ="";
                index--;
                if(index<0){
                    index=_length-1;
                }
                // opicNumLi[upper].className ="";
                opicNumLi[index].className ="on";
                // upper =index;
                move();
            }

点击小圆点就可以切换图片

这时需要给小圆点绑定事件

for(var i=0;i<_length;i++){
         var thatLi =document.createElement("li");
         thatLi.index =i;
         thatLi.onclick=function(){
             opicNumLi[index].className ="";//原来显示的图片小圆点颜色消失
             index=this.index;
             opicNumLi[index].className ="on";//点击的圆点状态为on
             move();
         }
        oPicNum.appendChild(thatLi);
    }
    var opicNumLi =oPicNum.querySelectorAll("li");
    opicNumLi[index].className ="on";

防止快速点击图片报错

快速点击时动画还没走完就index在一直加加而opicNumLi[index].className ="";这样就会报错因为超过length长度

定义开关，只有动画走完开关才开，在开的状态，index才能加加，动画才能执行

var_status =true;
 function move() {
            _status =false;//开关关闭
        animation(opic,{
            left : index * -_width
        },{
            duration : 600
        },function () {
            _status =true;//动画执行完才打开开关
            if (index>=_length){
                index=0;
                this.style.left =0;//因为直接设置css，速度是非常快的，肉眼看不到效果
            }
        })
    }
     oBtns[0].onclick =function(){
        if (_status){
            opicNumLi[index].className ="";
           index--;
            if(index<0){
                opic.style.left =-_length* _width+"px";
                index=_length-1;
            }
            opicNumLi[index].className ="on";
            move();
        }

    }
    oBtns[1].onclick =function(){
        if (_status){
            opicNumLi[index].className ="";
            index++;
            opicNumLi[index%_length].className ="on"; //当它大于_length  就设置为0
            move();
        }

    }