短视频直播系统，js利用构造函数封装轮播图
短视频直播系统，js利用构造函数封装轮播图实现的相关代码
html
<div>
<ul>
<li><img src="images/1.webp" alt=""></li>
<li><img src="images/2.webp" alt=""></li>
<li><img src="images/3.webp" alt=""></li>
<li><img src="images/4.webp" alt=""></li>
</ul>
<span class="iconfont left"></span>
<span class="iconfont right"></span>
</div>
css
* {
margin: 0;
padding: 0;
}
@font-face {
font-family: "iconfont";
src: url('./font/iconfont.ttf') format('truetype')
}
.iconfont {
font-family: "iconfont" !important;
font-size: 30px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
li {
list-style: none;
}
img {
width: 500px;
height: 260px;
}
ul {
position: relative;
width: 2000px;
display: flex;
transition: all 1000ms;
}
div {
position: relative;
margin: 50px auto;
width: 500px;
overflow: hidden;
}
ol {
position: relative;
bottom: 30px;
left: 30%;
display: flex;
}
ol li {
width: 15px;
height: 15px;
margin-right: 40px;
border-radius: 100%;
}
span {
position: absolute;
top: calc(50% - 20px);
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgba(0, 0, 0, 0.301);
color: #fafafa;
cursor: pointer;
}
.left {
font-size: 26px;
}
.right {
right: 0;
}
js
function SlideShow() {
this.ul = document.querySelector('ul');
this.lis = document.querySelectorAll('ul li');
this.div = document.querySelector('div');
this.left = document.querySelector('.left');
this.right = document.querySelector('.right');
this.init();
}
//初始化
SlideShow.prototype.init = function() {
n = 0;
_this = this;
this.dot();
this.autoplay();
this.arrow();
this.pause();
}
//自动播放
SlideShow.prototype.autoplay = function() {
timer = null;
var newLis = document.querySelectorAll('ol li');
timer = setInterval(() => {
n++;
n = n == 4 ? 0 : n;
if (newLis.length != 0) {
newLis.forEach(value => value.style.backgroundColor = '')
newLis[n].style.backgroundColor = '#fff'
}
this.ul.style.marginLeft = -500 * n + 'px';
}, 2000);
}
//是否生成导航圆点
SlideShow.prototype.dot = function() {
var ol = document.createElement('ol');
this.div.appendChild(ol);
this.lis.forEach(item => ol.appendChild(document.createElement('li')));
var newLis = document.querySelectorAll('ol li');
newLis[0].style.backgroundColor = '#fff';
for (var i = 0; i < newLis.length; i++) {
(function(i) {
newLis[i].onclick = function() {
newLis.forEach(value => value.style.backgroundColor = '');
newLis[i].style.backgroundColor = '#fff';
_this.ul.style.marginLeft = -500 * i + 'px';
return n = i;
}
})(i)
}
}
//箭头
SlideShow.prototype.arrow = function() {
var newLis = document.querySelectorAll('ol li');
this.left.onclick = function() {
clearInterval(timer);
n = n == 0 ? 3 : --n;
_this.ul.style.marginLeft = -500 * n + 'px';
if (newLis.length != 0) {
newLis.forEach(value => value.style.backgroundColor = '');
newLis[n].style.backgroundColor = '#fff';
}
}
this.right.onclick = function() {
clearInterval(timer);
n = n == 3 ? 0 : ++n;
_this.ul.style.marginLeft = -500 * n + 'px';
if (newLis.length != 0) {
newLis.forEach(value => value.style.backgroundColor = '');
newLis[n].style.backgroundColor = '#fff';
}
}
}
//暂停
SlideShow.prototype.pause = function() {
this.div.onmouseenter = function() {
clearInterval(timer);
}
this.div.onmouseleave = function() {
_this.autoplay();
}
}
var sli = new SlideShow();
以上就是 短视频直播系统，js利用构造函数封装轮播图实现的相关代码，更多内容欢迎关注之后的文章
