首先先想想实现的思路:
1.构造函数,创建方法
2.渲染页面
3.实现点击向左并实现无缝
4.实现点击向右并实现无缝
5.实现点击圆点切换
6.实现自动播放
7.鼠标进入实现关闭自动播放
话不多说直接上代码
js部分:
function Carousel(src1, src2, src3, src4, src5) {// 创建五个形参用来存放图片
var div
this.types = function () {//创建一个方法用来渲染页面
div = document.createElement('div')//创建一个div
div.className = 'banner-box'//设置div的class
//渲染内容,设置7个img用来实现无缝效果,向右和左的图标运用了font awesome字体图标库
div.innerHTML = `
<div class="imgs">
<ul>
<li><img draggable="false" src=${src5} alt=""></li>
<li><img draggable="false" src=${src1} alt=""></li>
<li><img draggable="false" src=${src2} alt=""></li>
<li><img draggable="false" src=${src3} alt=""></li>
<li><img draggable="false" src=${src4} alt=""></li>
<li><img draggable="false" src=${src5} alt=""></li>
<li><img draggable="false" src=${src1} alt=""></li>
</ul>
</div>
<div class="dots">
<span style="background-color: #fff;" data-ind="1"></span>
<span data-ind="2"></span>
<span data-ind="3"></span>
<span data-ind="4"></span>
<span data-ind="5"></span>
</div>
<div class="a-left"><i class="fa fa-angle-left fa-4x" aria-hidden="true"></i></div>
<div class="a-right"><i class="fa fa-angle-right fa-4x" aria-hidden="true"></i></div>`
//插入div
document.querySelector('.se-lb').append(div)
}
this.gain = function () {//构造一些变量
this.left = div.querySelector('.a-left')
this.right = div.querySelector('.a-right')
this.ul = div.querySelector('ul')
this.spans = div.querySelectorAll('.dots span')
this.liLen = this.ul.childElementCount
this.a = 1
// this.imgs = document.querySelector('.banner-box')
this.ul.style.left = '-' + this.a * 1400 + 'px'
this.fal = true
}
this.toright = function () {//实现点击向右
this.right.onclick = function () {
if (this.fal) {
this.relColor()
if (this.a != 5) {
this.spans[this.a].style.backgroundColor = '#fff'
}
this.fal = false
this.ul.style.transition = 'all .5s'
this.a++
this.ul.style.left = -this.a * 1400 + 'px'
if (this.a == 6) {
this.spans[0].style.backgroundColor = '#fff'
this.a = 0
this.ul.style.transition = 'all 0s'
this.ul.style.left = -this.a * 1400 + 'px'
setTimeout((e) => {
this.a = 1
this.ul.style.transition = 'all .5s'
this.ul.style.left = -this.a * 1400 + 'px'
}, 16.7)
}
setTimeout(() => {//节流阀
this.fal = true
}, 16.7)
}
}.bind(this)//更改this指向
}
this.toleft = function () {
this.left.onclick = function () {//构造点击向左
if (this.fal) {
this.relColor()
if (this.a != 1) {
this.spans[this.a - 2].style.backgroundColor = '#fff'
}
this.fal = false
this.ul.style.transition = 'all .5s'
this.a--
this.ul.style.left = -this.a * 1400 + 'px'
if (this.a == 0) {
this.spans[4].style.backgroundColor = '#fff'
this.a = 6
this.ul.style.transition = 'all 0s'
this.ul.style.left = -this.a * 1400 + 'px'
setTimeout((e) => {
this.a = 5
this.ul.style.transition = 'all .5s'
this.ul.style.left = -this.a * 1400 + 'px'
}, 16.7);
}
setTimeout(() => {
this.fal = true
}, 16.7)
}
}.bind(this)
}
this.relColor = function () {//下方的小圆点
this.spans.forEach(function (es) {
es.style.backgroundColor = ' rgb(134, 133, 133)'
})
}
var set = setTimeout(e => {
this.right.onclick()
}, 3000)//定时器实现自动轮播
this.dj = function () {//实现点击小圆点切换
this.spans.forEach((el) => {
el.onclick = function () {
this.a = el.getAttribute('data-ind')
this.ul.style.transition = 'all 1s'
this.ul.style.left = '-' + this.a * 1400 + 'px'
this.relColor()
el.style.backgroundColor = '#fff'
}.bind(this)
el.onmouseover = function(){
clearInterval(set)
}.bind(this)//放进小圆点关闭定时器
})
//以下实现进入轮播和进入左右切换关闭定时器和离开打开定时器
this.left.onmouseover = function () {
this.right.style.display = 'block'
this.left.style.display = 'block'
clearInterval(set)
}.bind(this)
this.right.onmouseover = function () {
this.right.style.display = 'block'
this.left.style.display = 'block'
clearInterval(set)
}.bind(this)
this.ul.onmouseover = function () {
this.right.style.display = 'block'
this.left.style.display = 'block'
clearInterval(set)
}.bind(this)
this.ul.onmouseout = function () {
this.right.style.display = 'none'
this.left.style.display = 'none'
set = setInterval(e => {
this.right.click()
}, 3000)
}.bind(this)
this.left.onmouseout = function () {
this.right.style.display = 'none'
this.left.style.display = 'none'
set = setInterval(e => {
this.right.click()
}, 3000)
}.bind(this)
this.right.onmouseout = function () {
this.right.style.display = 'none'
this.left.style.display = 'none'
set = setInterval(e => {
this.right.click()
}, 3000)
}.bind(this)
}
this.ind = function () {//应用方法
this.types()//构造html
this.gain()//获取元素
this.toright()//点击向右
this.toleft()//点击向左
this.dj()//点击原点
}
}
var caras = new Carousel(`./img/1.jpg`, `./img/2.jpg`, `./img/3.jpg`, `./img/4.jpg`, `./img/5.jpg`)//构造函数放入图片
caras.ind()//运行方法
css部分:
如果自己有需要还请自己修改大小、颜色等。
ul,
li {
list-style: none;
}
.banner-box {
width: 1400px;
height: 340px;
border: 2px solid sienna;
margin: auto;
overflow: hidden;
/* 子绝父相 */
position: relative;
user-select:none;
max-width: 969999px;
}
.imgs ul {
width: 10000px;
position: absolute;
/* 过渡 */
transition: all .5s;
left: 0;
}
.imgs ul li {
float: left;
}
.imgs ul li img {
width: 1400px;
height: 340px;
}
.dots {
position: absolute;
left: 50%;
bottom: 20px;
/* 回移一半 */
/* margin-left: -26px; */
transform: translateX(-50%);
}
.a-left,
.a-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 99;
cursor: pointer;
display: block;
}
.a-left {
width: 10px;
height: 10px;
line-height: 00px;
left: 80px;
padding: 50px;
background-color: rgb(0, 0, 0, .5);
border-radius: 50%;
display: none;
font-size: 16px;
text-align: center;
}
.a-right {
width: 10px;
height: 10px;
line-height: 00px;
right: 80px;
padding: 50px;
background-color: rgb(0, 0, 0, .5);
border-radius: 50%;
display: none;
font-size: 16px;
text-align: center;
}
.dots span {
width: 10px;
border-radius: 50%;
/* border: 1px solid #333; */
background-color: rgb(134, 133, 133);
height: 10px;
display: inline-block;
color: transparent;
cursor: pointer;
}
.banner-box i{
color: #fff;
position: absolute;
top: 15px;
left: 35px;
}
html部分:
创建一个class叫se-lb的盒子,js部分自己就插入了。
以上是个人的思路,如有不足请指正。