轮播图面向对象（继承及封装）

 

<!DOCTYPE html>
<html lang="en">
​
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
​
            .showBox,
            li {
                width: 400px;
                height: 250px;
            }
​
            li>img {
                width: 100%;
            }
​
            .showBox {
                position: relative;
                margin: 200px auto;
                /* 溢出隐藏 */
                overflow: hidden;
            }
​
            ul {
                width: 800%;
                position: relative;
            }
​
            ul>li {
                list-style: none;
                float: left;
            }
​
            .cirList {
                position: absolute;
                right: 20px;
                bottom: 10px;
                width: 150px;
            }
​
            .cirList>li {
                width: 10px;
                height: 10px;
                background-color: #fff;
                border-radius: 50%;
                margin: 0 5px;
            }
​
            .cirList .selected {
                background-color: red;
            }
​
            .arrow {
                display: none;
            }
​
            .arrow>a {
                display: block;
                width: 50px;
                height: 50px;
                position: absolute;
                top: 50%;
                margin-top: -25px;
            }
​
            .arrow>.prev {
                background: url(./images/prev.png) no-repeat center;
                background-size: contain;
                left: 0;
            }
​
            .arrow>.next {
                background: url(./images/next.png) no-repeat center;
                background-size: contain;
                right: 0;
            }
        </style>
    </head>
​
    <body>
        <div class="showBox">
            <ul class="nav">
                <li><img src="./images/slidepic1.jpg" alt=""></li>
                <li><img src="./images/slidepic2.jpg" alt=""></li>
                <li><img src="./images/slidepic3.jpg" alt=""></li>
                <li><img src="./images/slidepic4.jpg" alt=""></li>
                <li><img src="./images/slidepic5.jpg" alt=""></li>
                <li><img src="./images/slidepic6.jpg" alt=""></li>
                <li><img src="./images/slidepic7.jpg" alt=""></li>
            </ul>
            <!-- 焦点 -->
            <ul class="cirList">
            </ul>
            <div class="arrow">
                <a href="" class="prev"></a>
                <a href="" class="next"></a>
            </div>
        </div>
    </body>
​
</html>
<script src='https://cdn.bootcdn.net/ajax/libs/move.js/0.5.0/move.js'></script>
<script>
    //需要存储所有的图片的盒子 nav
    // 焦点  左右切换的盒子
    class Carousel {
        constructor(box) {
            this.box = box
            //根据大盒子获取存储图片的盒子
            this.nav = box.querySelector('.nav')
            //根据大盒子获取存储焦点的盒子
            this.cirList = box.querySelector('.cirList')
            //控制的下标
            this.index = 0
            this.init()
            this.handlerClick()
        }
        init() {
            //根据对应的原本的图片个数
            //将this.nav.children 当作数组调用forEach方法
            Array.prototype.forEach.call(this.nav.children, (v, i) => {
                let htmlCode = '<li></li>'
                if(i == 0){
                    htmlCode = "<li class='selected'></li>"
                }
                //给对应的焦点进行添加
                this.cirList.innerHTML += htmlCode
            })
            //生成焦点和在对应的nav后添加第一张图
            var cloneNode = this.nav.children[0].cloneNode(true)
            //加给最后
            this.nav.appendChild(cloneNode)
        }
        move(direction = true) {
            //区间判断
            if (this.index < 1 && !direction) {
                this.index = this.nav.children.length - 1
                //切换位置
                this.nav.style.transform = `translate3d(${this.index * this.box.offsetWidth * -1}px, 0px, 0px)`
            }
            if (this.index > this.nav.children.length - 2 && direction) {
                this.index = 0
                this.nav.style.transform = 'translate3d(-0px, 0px, 0px)'
            }
            //反方向为false
            if (direction) {
                this.index++
            } else {
                this.index--
            }
            //移动
            var x = this.index * this.box.offsetWidth * -1
            this.focusElement(this.index)
            move('.nav').to(x, 0).duration('1s').end()
        }
        autoMove() {
            let _self = this
            this.timer = setInterval(() => {
                _self.move(true)
            }, 2000)
        }
        focusElement(index){
            //取值为0-6
            if(index==7){
                index = 0
            }
            //排他思想
            Array.prototype.forEach.call(this.cirList.children,(v,i)=>{
                v.className = (i == index ? 'selected' : '')
            })
        }
        handlerClick(){
            var _self = this
            Array.prototype.forEach.call(this.cirList.children,(v,i)=>{
                let index = i
                v.onclick = function(){
                    _self.index = index-1
                    _self.move()
                }
            })
        }
    }
    var box = document.querySelector('.showBox')
    var carousel = new Carousel(box)
    carousel.autoMove()
</script>



 

posted @   後楓浪  阅读(33)  评论(0)  编辑  收藏  举报
相关博文：
·  运动（动画）
·  盒子页面拖拽
·  初代轮播图（后续我会更新完整版)
·  Dom 实现基础轮播图
·  练习5：轮播图布局
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示
AI IDE Trae