class类书写轮播图

最新推荐文章于 2024-05-21 23:21:19 发布

GO-zj

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量126

点赞数

分类专栏： JavaScript 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/hzq_zzzjjj/article/details/127792179

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、body模块

<body>
    <div class="rotation_chart">
        <!--图片区域-->
        <ul>
            <li><img src="img/D71D5502F7F63160CD6475F3211B34C0.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.png" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <!-- <li><img src="img/1.jpg" alt=""></li> -->
        </ul>
        <!--左右按钮区域-->
        <div class="btn">
            <span>&lt;</span>
            <span>&gt;</span>
        </div>
        <!--小圆圈区域-->
        <ol>
            <!-- <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li> -->
        </ol>
    </div>
    <script src="./js/tool.js"></script>
    <script src="./js/lunbo.js"></script>
</body>

二、class模块

*{
    margin: 0;
    padding: 0;
}
.rotation_chart{
    width: 500px;
    height: 500px;
    border: 1px solid;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}
.rotation_chart ul{
    width: calc(500px * 6);
    height: 500px;
    position: absolute;
}
.rotation_chart ul li{
    width: 500px;
    height: 500px;
    list-style: none;
    float: left;
}
.rotation_chart ul li img{
    width: 100%;
    height: 100%;
}
.rotation_chart .btn{
    width: 500px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.rotation_chart .btn span{
    float: left;
    width: 50px;
    height: 50px;
    background-color: #ccc;
    opacity: .7;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
.rotation_chart .btn span:last-child{
    float: right;
}
.rotation_chart ol{
    width: 160px;
    height: 15px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}
.rotation_chart ol li{
    list-style: none;
    width: 20px;
    height: 20px;
    background-color:black;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    float: left;
    margin: 0 3px;
    cursor: pointer;
    color: #fff;
}
.active{
    background-color: chartreuse !important;
}

三、js模块

1.tool.js

/*
匀速运动  
 @params {Object}  ele 表示运动的元素
 @params {Number}  step 表示运动步长
 @params {Number}  target 表示运动的终点
 @params {String}  attr  表示需要改变的样式
*/

function animateYs(ele, step, target, attr) {
    // ele.timer  = 100
    // console.dir(ele)
    // 清楚之前的定时器  
    clearInterval(ele.timer)
    // 开启移动的定时器
    ele.timer = setInterval(() => {
        // 获取初始值  
        let begin = parseInt(getStyle(ele, attr))
        console.log(begin)
        // 获取移动的距离
        let res = begin + step
        // 判断终点值
        if (res >= target && step > 0) {
            res = target
            clearInterval(ele.timer)
        } else if (res <= target && step < 0) {
            res = target
            clearInterval(ele.timer)
        }
        // 给元素的样式赋值
        ele.style[attr] = res + 'px'
    }, 30)

}

/*
    缓冲运动  
     @params {Object}  ele 表示运动的元素
     @params {Number}  target 表示运动的终点
     @params {String}  attr  表示需要改变的样式
     @params {Function}  callback  表示结束的时候需要执行的回调函数  可选参数
    */

function animateHc(ele, target, attr, callback) {
    // ele.timer  = 100
    // console.dir(ele)
    // 清楚之前的定时器  
    clearInterval(ele.timer)
    // 开启移动的定时器
    ele.timer = setInterval(() => {
        // 获取初始值  
        let begin = parseInt(getStyle(ele, attr))
        // console.log(begin)

        let step = (target - begin) / 10

        console.log(step)
        step = step > 0 ? Math.ceil(step) : Math.floor(step)

        //  target   1000    begin  0   
        //  第一次   step   100  
        //  第二次   begin  100   target  1000    step  90 
        //  第三次   begin  190   target  1000    step  81
        //  第四次   begin  271   target  1000    step  72.9

        // 获取移动的距离
        let res = begin + step
        // 给元素的样式赋值
        ele.style[attr] = res + 'px'
        console.log(res)
        if (res == target) {
            clearInterval(ele.timer)
            // if(callback){
            //     callback()
            // }
            callback && callback()
        }
    }, 30)

}
// 获取样式的函数
function getStyle(ele, attr, name = null) {
    if (window.getComputedStyle) {
        return getComputedStyle(ele, name)[attr]
    } else {
        return ele.currentStyle[attr]
    }
}

2.lunbo.js

class Swiper {
    constructor(ele) {
        this.ul = document.querySelector(ele)
        this.ol = document.querySelector('ol')
        this.startWidth = this.ul.children[0].offsetWidth
        this.prev = document.querySelectorAll('.btn>span')[0]
        this.next = document.querySelectorAll('.btn>span')[1]
        this.bigBox = document.querySelector('.rotation_chart')
        this.num = 0
        this.count = 0
        this.timer = null
        console.log(this.ul)
        this.init()
    }

    init() {
        this.setCircle()
        this.changeCircle()
        this.handleNext()
        this.handlePrev()

        this.addAuto()
        this.handleover()
        this.handleout()
    }
    //  创建小圆圈  
    setCircle() {
        for (var i = 0; i < this.ul.children.length; i++) {
            let li = document.createElement('li')
            li.innerHTML = i + 1
            this.ol.appendChild(li)
        }
        this.ol.children[0].className = 'active'
        let pic = this.ul.children[0].cloneNode(true)
        this.ul.appendChild(pic)
    }
    //  点击小圆圈切换图片  
    changeCircle() {
        for (let i = 0; i < this.ol.children.length; i++) {
            this.ol.children[i].onclick = () => {
                this.num = i
                this.count = i
                // // 排他思想  
                // for (let k = 0; k < this.ol.children.length; k++) {
                //     this.ol.children[k].className = ''
                // }
                // this.ol.children[i].className = 'active'
                this.changeActive(this.ol.children, this.count)
                animateHc(this.ul, -this.startWidth * i, 'left')
            }
        }
    }
    handleNext() {
        this.next.onclick = () => {
            this.handleAuto()
        }
    }
    handleAuto() {

        if (this.num == this.ul.children.length - 1) {
            this.num = 0
            this.ul.style.left = 0
        }
        this.num++
        animateHc(this.ul, -this.startWidth * this.num, 'left', () => {
            if (this.num == this.ul.children.length - 1) {
                this.num = 0
                this.ul.style.left = 0
            }
        })

        this.count++
        if (this.count == this.ol.children.length) {
            this.count = 0
        }
        // // 排他思想  
        // for (let k = 0; k < this.ol.children.length; k++) {
        //     this.ol.children[k].className = ''
        // }
        // this.ol.children[this.count].className = 'active'
        this.changeActive(this.ol.children, this.count)

    }
    handlePrev() {
        this.prev.onclick = () => {
            if (this.num == 0) {
                this.num = this.ul.children.length - 1
                this.ul.style.left = -this.startWidth * this.num + 'px'
            }
            this.num--
            animateHc(this.ul, -this.startWidth * this.num, 'left')
            if (this.count == 0) {
                this.count = this.ol.children.length
            }
            this.count--
            this.changeActive(this.ol.children, this.count)

        }
    }
    changeActive(arr, index) {
        for (var i = 0; i < arr.length; i++) {
            arr[i].className = ''
        }
        arr[index].className = 'active'
    }
    addAuto() {
        this.timer = setInterval(() => {
            this.handleAuto()
        }, 2000)
    }
    handleover() {
        this.bigBox.onmouseover = () => {
            clearTimeout(this.timer)
        }
    }
    handleout() {
        this.bigBox.onmouseout = () => {
            this.addAuto()
        }
    }
}

new Swiper('ul')