原生js手写轮播（面向对象）

最新推荐文章于 2022-10-14 10:34:56 发布

十月时光

最新推荐文章于 2022-10-14 10:34:56 发布

阅读量779

点赞数

分类专栏：随笔

本文链接：https://blog.csdn.net/qq_34158432/article/details/80117986

版权

随笔专栏收录该内容

4 篇文章 0 订阅

订阅专栏

其实从培训机构学习的时候就交手写轮播，工作两年就没有自己不参考任何文章去写一个出来，正好这段时间想好好学学面向对象，于是写了一个轮播，废话少说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="carousel.js"></script>
    <style>
        div,ul,li{
            margin: 0;
            padding: 0;
        }
        #outer{
            transition: 0.5s all;
            width: 1000px;
            overflow: hidden;
            position: relative;
        }
        #carousel{
            left:0%;
            transition: 0.5s all;
            position: relative;
            height:600px;
            width: 100000px;
            overflow: hidden;
        }
        #carousel li{
            transition: 0.5s all;
            letter-spacing: 4px;
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 600px;
            float: left;
            width: 1000px;
            height: 600px;
            list-style: none;
        }
        #btns button{
            position: absolute;
            top:300px
        }
        #btns button:first-child{
            left: 0;
        }
        #btns button:last-child{
            right: 0;
        }
        #port{
            position: absolute;
            bottom:0;
            text-align: -webkit-center;
            width: 100%;
        }
        #port span{
            cursor: pointer;
            display: block;
            height:10px;
            width:10px;
            background-color: #fff;
            border:1px solid #eee;
            border-radius: 50%;
            float: left;
            margin:10px 0 10px 4px
        }
        .setcolor{
            background-color: #666 !important;
            border:1px solid transparent;
        }
        .returncolor{
            background-color: #fff !important;
            border:1px solid #eee;
        }
    </style>
</head>
<body>
<div style="width: 100%;text-align: -webkit-center">
    <div id="outer">
        <ul id="carousel">
            <li style="background: blue;display: none">第四屏(tt)</li>
            <li style="background: green">第一屏(ljz)</li>
            <li style="background: red">第二屏(zss)</li>
            <li style="background: pink">第三屏(ljy)</li>
            <li style="background: blue">第四屏(tt)</li>
            <li style="background: green">第一屏(ljz)</li>
        </ul>
        <div id="port">
            <div style="overflow: hidden;width: 80px">
                <span οnclick="carousel.getCurrentPage(0)"></span>
                <span οnclick="carousel.getCurrentPage(1)"></span>
                <span οnclick="carousel.getCurrentPage(2)"></span>
                <span οnclick="carousel.getCurrentPage(3)"></span>
            </div>
        </div>
        <div id="btns">
            <button οnclick="carousel.btnnext()">prev</button>
            <button οnclick="carousel.btnprev()">next</button>
        </div>
    </div>
</div>
<script>
    var carousel = new carouselModel({imageID:'carousel'})
    carousel.makeArrInit()
    carousel.autoRunning()
    // carousel.changeCarouselArr('btnnext')
</script>
</body>
</html>

引入js

// it's ljz carousel designed
    var carouselModel = function (data) {
        this.imageID = data.imageID
        this.makeArr = []
        this.nums = ''
        this.carousel = ''
        this.pageNumsArr = []
        this.pageIndex = 0
        this.rexNumber = function () {
            if (typeof this.imageID !== 'string' || this.imageID === '') {
                console.log('imageID格式错误')
                return
            }
        }
        this.makeArrInit = function () {
            this.rexNumber()
            let eleID = document.getElementById(this.imageID)
            this.carousel = eleID
            let eles = eleID.getElementsByTagName('li')
            let numsarr = document.getElementById('port').getElementsByTagName('span')
            for (let i in eles) {
                if (typeof eles[i] === 'object') {
                    this.makeArr.push(eles[i])
                }
                if (typeof numsarr[i] === 'object') {
                    this.pageNumsArr.push(numsarr[i])
                }
            }
            this.pageNumsArr[0].className = 'setcolor'
        }
        this.btnprev = function () {
            let cleft = this.carousel.style.left
            cleft = cleft.replace(/%/,'')
            this.nums = this.carousel.style.left.replace(/%/,'').replace(/-/,'')/100
            if(this.nums<this.makeArr.length - 3){
                this.carousel.style.left = cleft - 100 +'%'
                this.pageIndex ++
            }else{
                console.log(this.pageIndex)
                this.carousel.style.left = '0%'
                this.nums = ''
                this.pageIndex = 0
            }
            this.setNumsArrColor()
        }
        this.btnnext = function () {
            let cleft = this.carousel.style.left
            cleft = cleft.replace(/%/, '')
            this.nums = this.carousel.style.left.replace(/%/, '').replace(/-/, '') / 100
            if (this.nums === 0) {
                this.carousel.style.left = '-' + (this.makeArr.length - 1) * 100 + '%'
                this.pageIndex  = this.makeArr.length - 1
            } else if (this.nums > 0) {
                this.pageIndex --
                this.carousel.style.left = parseInt(cleft) + 100 + '%'
            }
            this.setNumsArrColor()
        }
        this.autoRunning = function (callback) {
            let _this = this
           setTimeout(function () {
               // _this.btnprev()
               _this.autoRunning()
           },6000)
        }
        this.setNumsArrColor = function () {
            for(let i in this.pageNumsArr){
                this.pageNumsArr[i].className = 'returncolor'
            }
            this.pageNumsArr[this.pageIndex].className = 'setcolor'
        }
        this.getCurrentPage = function (index) {
            this.carousel.style.left = (index) * -100 + '%'
            this.pageIndex = index
            this.setNumsArrColor()
        }
        this.changeCarouselArr = function (type) {
            if(type === 'btnprev') {
                let splitenum = this.makeArr.splice(this.makeArr.length - 1,1)
                console.log(splitenum[0].innerText)
                this.makeArr.unshift(splitenum[0])
                for(let i in this.makeArr){
                    console.log('for:' + this.makeArr[i].innerText)
                }
            } else if (type === 'btnnext') {
                let splitenum = this.makeArr.splice(0, 1)
                console.log(splitenum[0].innerText)
                this.makeArr.push(splitenum[0])
                for (let i in this.makeArr) {
                    console.log('for:' + this.makeArr[i].innerText)
                }
            }
        }

}

其实写的不怎么样，不是无缝轮播，但是写完后对面向对象有了进一步的了解。

十月时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js手写轮播（面向对象）

其实从培训机构学习的时候就交手写轮播，工作两年就没有自己不参考任何文章去写一个出来，正好这段时间想好好学学面向对象，于是写了一个轮播，废话少说，直接上代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&l
复制链接

扫一扫

专栏目录