轮播图

最新推荐文章于 2022-04-10 16:16:23 发布

mischievous_boy

最新推荐文章于 2022-04-10 16:16:23 发布

阅读量99

点赞数

分类专栏：前端文章标签： js css

本文链接：https://blog.csdn.net/mischievous_boy/article/details/105623255

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这次用的对象写的，总体加深了对象的理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图（面向对象）</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div id="box">
        <div class="list">
            <ul class="pic-li">
                <li class="current"><img src="./images/4.jpg" alt="" ></li>
                <li><img src="./images/5.jpg" alt=""></li>
                <li><img src="./images/7.jpg" alt="" ></li>
                <li><img src="./images/11.jpg" alt="" ></li>
                <li><img src="./images/13.jpg" alt="" ></li>
            </ul>
            <div class="btnLeft">
                <span></span>
            </div>
            <div class="btnRight">
                <span></span>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    var autoPlayer = {
        index: 0,
        init: function(){
            this.initData(); 
            this.doMove();
            this.clickCircle();
            this.sideBtn();
            this.sideMove(this.btnLeft);
            this.sideMove(this.btnRight);
        },
        initData: function(){
           this.oImg = document.querySelectorAll("li");
           this.oUl = document.querySelectorAll("ul");
           this.oList = document.querySelectorAll(".list");
           this.box = document.querySelectorAll("#box")[0];
           this.creatCilcleBtn();
           this.oCount = document.querySelectorAll('.count')[0];
           this.oCountLi = document.querySelectorAll(".circle");
           this.btnLeft = document.querySelectorAll(".btnLeft")[0];
           this.btnRight = document.querySelectorAll(".btnRight")[0];
        },
        changePic:function() {
            for(var i = 0; i < this.oImg.length; i++) {
                this.oImg[i].className = '';
            }
            this.oImg[this.index].className = 'current';
        },
        goNext: function() {
            this.index = (this.index + 1) % 5;
            this.changeCircle();
            this.changePic();
        },
        doMove: function() {
            
            var oThis = this;
            //在没有开始定时器之前改变圆圈颜色的应该是第一个
            oThis.oCountLi[0].className = "'circle circleMove";  
            
            oThis.timer = setInterval(function(){
                oThis.goNext();
                // console.log(oThis.index);
            for(var i = 0; i < oThis.oImg.length; i++) {
                oThis.oCountLi[i].className = "circle";
             }
                oThis.oCountLi[oThis.index].className = 'circle circleMove';
              
            },5000)
            
        },
        creatCilcleBtn: function(){
            //获取创建的circle
           this.oCircleList = document.createElement("ul");
           this.oFrag = document.createDocumentFragment();
           this.oCircleList.className = 'count';
           for(var i = 0; i < this.oImg.length; i ++) {
               var newLi = document.createElement("li");
               newLi.className = 'circle';
               newLi.setAttribute("cirID",i + '');
               newLi.innerHTML = i + 1;
               this.oFrag.appendChild(newLi);
           }
           this.oCircleList.appendChild(this.oFrag);
           this.oList[0].appendChild(this.oCircleList);
        },
        clickCircle: function() {
            var oThis = this;
            for(var i = 0; i < oThis.oCountLi.length; i ++) {
                (function(j) {
                    oThis.oCountLi[j].onmousedown = function() {
                      
                        var cirNum = oThis.oCountLi[j].getAttribute('cirID');
                        oThis.index = Number(cirNum);
                        // console.log(oThis.index);
                        oThis.changePic();
                        oThis.changeCircle();
                    }
                }(i))
            }
        },
        changeCircle: function(){
            for(var i = 0; i < this.oImg.length; i++) {
                this.oCountLi[i].className = "circle";
            }
            this.oCountLi[this.index].className = 'circle circleMove';
        },
        sideBtn: function() {
            var oThis = this;
            oThis.box.onmouseover = function() {
                oThis.btnLeft.style.display = 'flex';
                oThis.btnRight.style.display = 'flex';
                oThis.box.onmouseout = function() {
                    oThis.btnLeft.style.display = 'none';
                    oThis.btnRight.style.display = 'none';
                };
            };
            
        },
        sideMove: function(e) {
            var oThis = this;
            e.onmousedown = function() {
                if(e == oThis.btnLeft) {
                   oThis.index = Math.abs((oThis.index + 4) % 5);
                   oThis.changeCircle();
                   oThis.changePic();
                }
                if(e == oThis.btnRight) {
                    oThis.index = Math.abs((oThis.index + 1) % 5);
                    oThis.changeCircle();
                    oThis.changePic();
                }

            }
        }
        
    }
    window.onload=autoPlayer.init();
</script>

css

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #000;
}
#box {
    width: 600px;
    height: 400px;
    margin: 100px auto;
    cursor: pointer;
    position: relative;
    border: 10px solid #fff;
    border-radius: 10px;
}
#box .list{
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
}
ul {
    list-style: none;
    
}
#box .list .pic-li li {
    width: 600px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    
}
img {
    width: 600px;
    height: 400px;
}
#box .current {
    z-index: 1;
}
#box .count{
    display: grid;
    width: 140px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 230px;
    grid-template-columns: 20px 20px 20px 20px 20px ;
    column-gap: 5px;
    border: 1px solid #f8f8f8;
    z-index: 100;
    justify-content: center;
    align-content: center;
    border-radius: 10px;
}
#box .count li{
    display: grid;
    height: 20px;
    background-color: aqua;
    justify-content: center;
    align-content: center;
    border-radius: 50%;
}
#box .count .circleMove {
    background-color: springgreen;
}

#box .btnLeft , #box .btnRight{ 
    position: absolute;
    width: 30px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 100;
    top: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;

}

#box .btnLeft {
    left: 0;
    border-radius: 0 20px 20px  0 ;
}
#box .btnRight {
    right: 0;
    border-radius:20px 0   0 20px ;
}
#box .btnLeft span , #box .btnRight span {
    width: 15px;
    height:15px;
    border: 1px solid #f8f8f8;
    z-index: 1000;
}
#box .btnLeft span {
     transform: rotate(45deg) ;
    border-style:  none none solid solid;
}
#box .btnRight span {
    transform:  rotate(45deg);
    border-style: solid solid none none;
}

mischievous_boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图

这次用的对象写的，总体加深了对象的理解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫