面向对象的轮播图

月半小夜屈

已于 2022-05-19 19:47:51 修改

阅读量64

点赞数

文章标签： css html css3 javascript

于 2022-05-19 19:10:44 首次发布

本文链接：https://blog.csdn.net/qq_41599604/article/details/124869413

版权

效果图

1.html布局

<body>
    <div class="carousel">
        <!-- 背景图 -->
        <ol>
            <li class="chuxian"></li>
            <li></li>
            <li></li>
        </ol>

        <!-- 按钮 -->
        <ul>
            <li class="chuxian"></li>
            <li></li>
            <li></li>
        </ul>
        <span></span>
        <span></span>
    </div>

</body>

2.css样式

<style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 340px;
            position: relative;
            border: 2px solid #333;
            margin: 50px auto;
        }

        ul,
        ol {
            list-style: none;
        }

        ol {
            position: absolute;
            height: 100%;

        }

        ol li {
            /* display: none; */
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: all .5s;
            height: 100%;
            width: 500px;
        }

        ol .chuxian {
            display: block;
            opacity: 1;
        }

        ul {
            display: flex;
            position: absolute;
            width: 50px;
            justify-content: space-around;
            top: 300px;
            left: 30px;
        }

        ul li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: white;
        }

        ol li:nth-child(1) {
            background: url(img/1.jpg) no-repeat;
            background-size: 500px 340px;
        }

        ol li:nth-child(2) {
            background: url(img/2.jpg) no-repeat;
            background-size: 500px 340px;
        }

        ol li:nth-child(3) {
            background: url(img/3.jpg) no-repeat;
            background-size: 500px 340px;
        }

        ul li.chuxian {
            background-color: pink;
        }

        span {
            display: block;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 25px;
            height: 32px;
            background-color: rgba(252, 252, 252, 0.414);
            z-index: 1;
        }

        span:nth-of-type(1) {
            left: 5px;
            background-image: url(img/向左箭头.png);
        }

        span:nth-of-type(2) {
            right: 5px;
            background-image: url(img/向右箭头.png);
        }
    </style>

3.JS代码

<script>
    function loop(classname) {
        this.box = document.querySelector(`.${classname}`)
        this.ulis = this.box.querySelectorAll('ul li')
        this.olis = this.box.querySelectorAll('ol li')
        //前进后退键
        this.back = this.box.querySelector('span:nth-of-type(1)')
        this.forward = this.box.querySelector('span:nth-of-type(2)')
        
        //定义初始下标
        this.n = 0
        this.timer = null
        this.fn()
    }
    //封装定时器重复的代码
    loop.prototype.auto = function () {
        this.timer = setInterval(this.forward.onclick, 1500)
    }
    //封装切换时重复的代码
    loop.prototype.switch = function (i) {
        this.box.querySelector('ul li.chuxian').className = ''
        this.box.querySelector('ol li.chuxian').className = ''

        this.ulis[i].className = 'chuxian'
        this.olis[i].className = 'chuxian'
    }

    //绑定事件
    loop.prototype.fn = function () {

        // for (let i = 0; i < this.ulis.length; i++) {
        //     this.ulis[i].onmouseenter = () => {
        //         this.switch(i)
        //     }
        // }
        
        let Ul = this.box.querySelector('ul');

        //用call将this指向改为当前伪数组，调用数组forEach方法
        [].forEach.call(this.ulis,(item,i)=>item.index=i)
        //大佬方法
        //[...this.ulis].forEach((item, i) => item.index = i)

        // 用委托事件处理
        Ul.onclick = e => {
            if (e.target.nodeName == 'LI') {
                this.box.querySelector('ul li.chuxian').className = ''
                this.box.querySelector('ol li.chuxian').className = ''
                e.target.className = 'chuxian'
                this.olis[e.target.index].className = 'chuxian'
            }
        }

        // 后退
        this.back.onclick = () => {
            //轮回播放，下标++或--，到达最大值重置下标
            this.n = (--this.n) < 0 ? this.ulis.length - 1 : this.n

            this.switch(this.n)
        }
        //前进
        this.forward.onclick = () => {
            this.n = (++this.n > this.ulis.length - 1) ? 0 : this.n

            this.switch(this.n)
        }

        this.auto()

        this.box.onmouseenter = () => clearInterval(this.timer)

        this.box.onmouseleave = () => this.auto()
    }

    new loop('carousel')
</script>

月半小夜屈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象的轮播图

1.html布局<body> <div class="carousel">  <ol> <li class="chuxian"></li> <li></li> <li></li> </ol> <!-
复制链接

扫一扫