1.html部分
<body>
<div class="banner" id="box1">
<!-- 放置所有轮播图的盒子 -->
<ul class="img_box">
<li class="active" ><img src="../img/熊猫1.webp" alt=""></li>
<li><img src="../img/熊猫2.webp" alt=""></li>
<li><img src="../img/熊猫3.webp" alt=""></li>
<li><img src="../img/熊猫4.webp" alt=""></li>
<li><img src="../img/熊猫5.webp" alt=""></li>
</ul>
<!-- 放置焦点的盒子 -->
<ol class="focus">
<!-- <li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li> -->
</ol>
<!-- 左右按钮 -->
<div class="left"><</div>
<div class="right">></div>
</div>
2.css部分
<style>
* {
padding: 0;
margin: 0;
}
.banner {
width: 600px;
height: 400px;
border: 5px solid black;
margin: 200px auto;
/* overflow: hidden; */
position: relative;
}
.banner .img_box {
width: 500%;
height: 100%;
list-style: none;
display: flex;
position: absolute;
left: 0px;
}
.banner .img_box li {
width: 600px;
height: 100%;
font-size: 50px;
text-align: center;
line-height: 400px;
display: none;
}
.banner .img_box .active {
display: block;
}
.img_box img {
width: 100%;
height: 100%;
}
.banner .focus {
width: 200px;
height: 30px;
background-color: white;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 30px;
border-radius: 20px;
display: flex;
justify-content: space-evenly;
align-items: center;
list-style: none;
}
.banner .focus li {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rosybrown;
cursor: pointer;
}
.banner .focus .active {
background-color: red;
}
.left,
.right {
position: absolute;
transform: translateY(-50%);
font-size: 50px;
color: white;
top: 50%;
cursor: pointer;
}
.left {
left: 30px;
}
.right {
right: 30px;
}
</style>
3.js部分
/**
* 思路:
* 1.获取属性
* 2.添加焦点
* 3.自动轮播
* 4.点击事件
* ***/
//E6 的新写法 class
class Banner {
//1.添加属性,获取元素
constructor(ele, options) {
//获取#box1 区分是哪一个轮播图 已就是大banner
this.Box1 = document.querySelector(ele)
//获取放轮播图的盒子 img_Box
this.imgBox = document.querySelector('.img_box')
//获取放焦点的盒子 focus
this.focus = document.querySelector('.focus')
//记录当前在第几张图片,默认第一张,按照下标的形式储存
this.index = 0
//记得调用
this.setFocus() //添加焦点的调用
this.autoPlay() //自动轮播
this.overOut() //移入移出事件
this.clickBan()
}
//原型 方法
//2. 添加焦点(核心:根据图片数量动态生成焦点)
setFocus() {
//2.1 获取照片的数量 也就是imgBox子元素的数量
const imgNum = this.imgBox.children.length
//遍历照片数量的长度
for (let i = 0; i < imgNum; i++) {
//根据遍历的次数创建li
const newLi = document.createElement('li')
//添加类名 好找到点击了li
newLi.classList.add('new_li')
//跳转到对应的项
// newLi.classList.add(i)
newLi.dataset.id = i
//默认情况第一个子元素有高光
if (i == 0) {
newLi.classList.add('active')
}
//把创建的li插入到focus中
this.focus.appendChild(newLi)
}
}
//2.2 切换 (核心:给不同的li添加类名,也达到切换的效果)
cut(type) {
//去掉imgBox focus的类名
this.imgBox.children[this.index].classList.remove('active') //去掉全部的显现
this.focus.children[this.index].classList.remove('active')//去掉全部的显现
/**this.index的使用场景
* 上一页
* 下一页
* 点击焦点的时候跳转到对应页
*
* 我规定type可以传递三个值 来判断走哪一个使用场景做出相应的操作
* 当上一页时 传递true
* 当下一页时 传递false
* 点击焦点时,传递对应的数字
* */
//2.2.1 判断
if (type == true) {
this.index++
} else if (type == false) {
this.index--
} else {
this.index = type
}
//2.3 边界判断 当照片切换到第五张照片时回到第一张照片 当照片在第一张时自己切换到第五张
if (this.index > this.imgBox.children.length - 1) {
this.index = 0
}
if (this.index < 0) {
this.index = this.imgBox.children.length - 1
}
//2.4 找到对应项,给他添加类名
this.imgBox.children[this.index].classList.add('active') //让对应图片显现出来
this.focus.children[this.index].classList.add('active') //让对应高光显现出来
}
//3. 自动轮播 (核心:计时器)
autoPlay() {
this.timer = setInterval(() => {
//类似运动函数
this.cut(true)
}, 2000)
}
//4 鼠标移入移出事件
overOut() {
//移入事件 停止定时器
this.Box1.onmouseover = () => {
clearInterval(this.timer)
}
//移出重新调用
this.Box1.onmouseout = () => {
this.autoPlay()
}
}
//5 点击事件 有比较多的点击事情就用事件委托
clickBan() {
this.Box1.onclick = (e) => {
if (e.target.className == 'right') {
this.cut(true)
}
if (e.target.className == 'left') {
this.cut(false)
}
if (e.target.className == 'new_li') {
// this.cut(i)
this.cut(e.target.dataset.id - 0)
}
}
}
}
