直接来代码!
h5
<div class="banner" id="banner">
<ul class="imgBox">
<li class="active"><img src="" alt=""></li>
<li ><img src="" alt=""></li>
<li ><img src="" alt=""></li>
<li ><img src="" alt=""></li>
<li ><img src="" alt=""></li>
<li ><img src="" alt=""></li>
</ul>
<!-- 焦点 -->
<ol class="pointBox"></ol>
<!-- 左右切换 -->
<div class="prev"><</div>
<div class="next">></div>
</div>
css样式
<style>
/* 取消默认样式 */
ul, ol, li {
list-style: none;
}
.banner {
width: 600px;
height: 400px;
border: 10px solid orangered;
margin: 30px auto;
position: relative;
}
.banner > ul {
width: 100%;
height: 100%;
position: relative;
}
.banner > ul > li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
/* 隐藏照片 */
opacity: 0;
transition: opacity .5s linear;
}
.banner > ul > li > img {
width: 100%;
height: 100%;
}
/* 显示照片 */
.banner > ul > li.active {
opacity: 1;
}
/* 设置焦点 */
.banner > ol {
width: 200px;
height: 30px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
left: 30px;
bottom: 30px;
border-radius: 15px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.banner > ol > li {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
.banner > ol > li.active {
background-color: red;
}
.banner:hover > div {
display: flex;
}
/* 左右切换 */
.banner > div {
width: 30px;
height: 40px;
background-color: rgba(0, 0, 0, .2);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
display: none;
}
.banner > div:hover {
background-color: rgba(0, 0, 0, .5);
}
.banner > div.prev {
left: 0;
}
.banner > div.next {
right: 0;
}
</style>
js部分,ES6类语法 面向对象思想来实现
class Banner{
// 获取元素,
constructor(select){
this.ele=document.querySelector(select)
// 获取图片盒子,获取焦点
this.imgBox=this.ele.querySelector('.imgBox')
this.pointBox=this.ele.querySelector('.pointBox')
//为了计数用
this.index=0
// 为了定时器自动轮播用
this.timer=0
// 调用方法
this.init()
}
init(){
this.setPoint()
this.autoPlay()
this.overOut()
this.bindEvent()
}
// 设置生成焦点,
setPoint () {
// 定义焦点数量,和图片数量相等
const pointNum=this.imgBox.children.length
// 循环焦点
for (let i = 0; i < pointNum; i++) {
// 生成焦点元素
const li = document.createElement('li')
// 添加类名,为了下面方便使用,添加自定义属性计数值
li.classList.add('point')
li.dataset.i=i
// 默认第一个焦点添加active类名
if(i===0) li.classList.add('active')
// 插入焦点盒子
this.pointBox.appendChild(li)
}
// 重新设置焦点宽度,为了美观
this.pointBox.style.width = pointNum*30+'px'
}
// 切换一张,为了实现自动轮播,先搞定切换一张
changeOne (type) {
// 初始 imgBox pointBox 去除active样式
this.imgBox.children[this.index].classList.remove('active')
this.pointBox.children[this.index].classList.remove('active')
// type参数为了判断向后一张 或向前一张 或点击一张
switch (type) {
case true:
// 判断true 就是加一张
this.index ++
break;
case false:
// 判断false 就是上一张
this.index--
break;
default:
// 当用户点击point,就是该一张
this.index = type
}
// 界限判定,到达最后一张要切到第一张,或倒着第一张切换到最后一张
if(this.index >= this.imgBox.children.length) this.index = 0
if(this.index < 0) this.index = this.imgBox.children.length - 1
// 给这一张或这一个焦点添加active
this.imgBox.children[this.index].classList.add('active')
this.pointBox.children[this.index].classList.add('active')
}
// 自动轮播,定时器实现,可以改变轮播速度
autoPlay () {
this.timer = setInterval (() => this.changeOne(true),1500)
}
// 鼠标移入,暂停定时器,停止轮播,鼠标移出,开启自动轮播
overOut () {
this.ele.addEventListener('mouseover', () => clearInterval(this.timer) )
this.ele.addEventListener('mouseout', () => this.autoPlay())
}
// 用户手动点击切换图片
bindEvent () {
this.ele.addEventListener('click',(e) => {
// 简单兼容一下
e = e || window.event
// 获取事件目标 并考虑兼容
const target = e.target ||e.srcElement
// 判断点击谁
// 点击上一张,false 就是index--
if (target.className === 'prev') this.changeOne(false)
// 点击下一张, true 就是index++
if (target.className === 'next') this.changeOne(true)
// 点击某一张, 传入该元素携带的自定义属性值
if (target.className === 'point') this.changeOne(target.dataset.i - 0)
})
}
}
// 调用
const b=new Banner('#banner')