短视频直播系统，js利用构造函数封装轮播图

短视频直播系统，js利用构造函数封装轮播图实现的相关代码

html

 

1

<br>    <div><br>        <ul><br>            <li><img src="images/1.webp" alt=""></li><br>            <li><img src="images/2.webp" alt=""></li><br>            <li><img src="images/3.webp" alt=""></li><br>            <li><img src="images/4.webp" alt=""></li><br>        </ul><br>        <span class="iconfont left">&#xe602;</span><br>        <span class="iconfont right">&#xe622;</span><br>    </div>

​css

 

1

<br>        * {<br>            margin: 0;<br>            padding: 0;<br>        }<br>        <br>        @font-face {<br>            font-family: "iconfont";<br>            src: url('./font/iconfont.ttf') format('truetype')<br>        }<br>        <br>        .iconfont {<br>            font-family: "iconfont" !important;<br>            font-size: 30px;<br>            font-style: normal;<br>            -webkit-font-smoothing: antialiased;<br>            -moz-osx-font-smoothing: grayscale;<br>        }<br>        <br>        li {<br>            list-style: none;<br>        }<br>        <br>        img {<br>            width: 500px;<br>            height: 260px;<br>        }<br>        <br>        ul {<br>            position: relative;<br>            width: 2000px;<br>            display: flex;<br>            transition: all 1000ms;<br>        }<br>        <br>        div {<br>            position: relative;<br>            margin: 50px auto;<br>            width: 500px;<br>            overflow: hidden;<br>        }<br>        <br>        ol {<br>            position: relative;<br>            bottom: 30px;<br>            left: 30%;<br>            display: flex;<br>        }<br>        <br>        ol li {<br>            width: 15px;<br>            height: 15px;<br>            margin-right: 40px;<br>            <br>            border-radius: 100%;<br>        }<br>        <br>        span {<br>            position: absolute;<br>            top: calc(50% - 20px);<br>            width: 30px;<br>            height: 30px;<br>            line-height: 30px;<br>            text-align: center;<br>            background-color: rgba(0, 0, 0, 0.301);<br>            color: #fafafa;<br>            cursor: pointer;<br>        }<br>        <br>        .left {<br>            font-size: 26px;<br>        }<br>        <br>        .right {<br>            right: 0;<br>        }

js

 

1

<br>        function SlideShow() {<br>            this.ul = document.querySelector('ul');<br>            this.lis = document.querySelectorAll('ul li');<br>            this.div = document.querySelector('div');<br>            this.left = document.querySelector('.left');<br>            this.right = document.querySelector('.right');<br>            this.init();<br>        }<br>        //初始化<br>        SlideShow.prototype.init = function() {<br>            n = 0;<br>            _this = this;<br>            this.dot();<br>            this.autoplay();<br>            this.arrow();<br>            this.pause();<br>        }<br>        //自动播放<br>        SlideShow.prototype.autoplay = function() {<br>            timer = null;<br>            var newLis = document.querySelectorAll('ol li');<br>            timer = setInterval(() => {<br>                n++;<br>                n = n == 4 ? 0 : n;<br>                if (newLis.length != 0) {<br>                    newLis.forEach(value => value.style.backgroundColor = '')<br>                    newLis[n].style.backgroundColor = '#fff'<br>                }<br>                this.ul.style.marginLeft = -500 * n + 'px';<br>            }, 2000);<br>        }<br>        //是否生成导航圆点<br>        SlideShow.prototype.dot = function() {<br>            var ol = document.createElement('ol');<br>            this.div.appendChild(ol);<br>            this.lis.forEach(item => ol.appendChild(document.createElement('li')));<br>            var newLis = document.querySelectorAll('ol li');<br>            newLis[0].style.backgroundColor = '#fff';<br>            for (var i = 0; i < newLis.length; i++) {<br>                (function(i) {<br>                    newLis[i].onclick = function() {<br>                        newLis.forEach(value => value.style.backgroundColor = '');<br>                        newLis[i].style.backgroundColor = '#fff';<br>                        _this.ul.style.marginLeft = -500 * i + 'px';<br>                        return n = i;<br>                    }<br>                })(i)<br>            }<br>        }<br>        //箭头<br>        SlideShow.prototype.arrow = function() {<br>            var newLis = document.querySelectorAll('ol li');<br>            this.left.onclick = function() {<br>                clearInterval(timer);<br>                n = n == 0 ? 3 : --n;<br>                _this.ul.style.marginLeft = -500 * n + 'px';<br>                if (newLis.length != 0) {<br>                    newLis.forEach(value => value.style.backgroundColor = '');<br>                    newLis[n].style.backgroundColor = '#fff';<br>                }<br>            }<br>            this.right.onclick = function() {<br>                clearInterval(timer);<br>                n = n == 3 ? 0 : ++n;<br>                _this.ul.style.marginLeft = -500 * n + 'px';<br>                if (newLis.length != 0) {<br>                    newLis.forEach(value => value.style.backgroundColor = '');<br>                    newLis[n].style.backgroundColor = '#fff';<br>                }<br>            }<br>        }<br>        //暂停<br>        SlideShow.prototype.pause = function() {<br>            this.div.onmouseenter = function() {<br>                clearInterval(timer);<br>            }<br>            this.div.onmouseleave = function() {<br>                _this.autoplay();<br>            }<br>        }<br>        var sli = new SlideShow();

 

以上就是 短视频直播系统，js利用构造函数封装轮播图实现的相关代码，更多内容欢迎关注之后的文章