本次项目所需知识点：
ES6构造函数class
面向对象
项目开始：
先将轮播图的素材、结构框架和样式写好
结构：
// 轮播图的区域
<div class="box">
// 轮播图图片
<ul>
<li style="opacity: 1;"><img src="./01.jpg" alt=""></li>
<li><img src="./02.jpg" alt=""></li>
<li><img src="./03.jpg" alt=""></li>
<li><img src="./04.jpg" alt=""></li>
</ul>
// 轮播图对应的焦点
<ol></ol>
// 轮播图左右切换的标签按钮
<div class="btn">
<span class="span1" name="left" > < </span>
<span class="span2" name="right" > > </span>
</div>
</div>
样式：
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
.box {
width: 520px;
height: 280px;
margin: 50px auto;
border: black 3px solid;
position: relative;
}
ul {
width: 100%;
height: 100%;
position: relative;
}
ul li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 2s linear;
}
.btn {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: none;
}
span {
color: white;
font-size: 30px;
display: flex;
width: 40px;
height: 45px;
display: block;
background: rgba(0, 0, 0, .5);
text-align: center;
margin: 10px;
cursor: pointer;
}
ol {
background: rgba(0, 0, 0, 0.4);
border-radius: 20px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 200;
display: flex;
}
ol li {
width: 15px;
height: 15px;
border: white 2px solid;
margin: 10px 10px;
border-radius: 50%;
cursor: pointer;
}
ol li.active {
border: rgb(41, 40, 40) 2px solid;
}
创建一个外部js文件，进行js外部引用
<script src="./渐隐渐显.js"></script>
<script>
// 获取执行轮播图的标签
const oBox = document.querySelector('.box');
// 定义构造函数，生成实例化对象
const oBanner = new Banner(oBox);
// 调用方法
oBanner.init();
</script>
外部js文件
实现轮播的效果
// ES6语法形式定义构造函数 oBanner
class oBanner{
constructor(ele) {
// 获取标签
// 获取执行轮播图的标签
this.ele = ele;
// 获取轮播图图片父级标签
this.oUl = ele.querySelector('ul');
// 获取轮播图对应的焦点
this.oOl = ele.querySelector('ol');
// 获取左右点击标签的父级标签
this.clickLR = ele.querySelector('.btn');
// 获取左右点击标签
this.span1 = ele.querySelector('.span1');
this.span2 = ele.querySelector('.span2');
// 获取轮播图的图片标签
this.oUllis = ele.querySelectorAll('ul li');
// 记录存储轮播图的次数,从索引是0的第一张图片显示
this.index = 0;
// 定义存储定时器
this.time = 0;
}
// 实例化对象方法调用
init(){
this.setLi();
this.autoLoop();
this.overOut();
this.setClick();
}
// 设定焦点方法
setLi(){
// 循环遍历ulli，根据ulli的数量生成对应的olli的数量
this.oUllis.forEach((item,key)=> {
// 定义生成li，用字节创建的方法
const li = document.createElement('li');
// 将生成的ol中的li与ul定义的li做区别
li.setAttribute('name','olli');
// 给对应的li设定与ulli对应的索引值
li.setAttribute('index',key);
// 如果索引等于0(第一个li) 给他添加初始的class属性样式
if(key == 0){
li.className = 'active';
}
// 将生成的li写到ol中 用字节添加的方法
this.oOl.appendChild(li);
});
}
// change()方法
// 单独写一下 点击的方向 判断
change(param){
// 图片的初始透明图设置为0
this.oUllis[this.index].style.opacity = 0;
// 如果点击的是向右
if (param == 'right'){
// 轮播方向向右，轮播索引++ ，向右切换图片
this.index++;
}
// 如果点击的是向左
if (param == 'left'){
// 轮播方向向左，轮播索引-- ，向左切换图片
this.index--;
}
// 如果索引是-1 他应该是跳到最后一张图的位置 进行循环切换
if(this.index == -1){
// 最后一张图的位置 就是 索引的长度-1
this.index = this.oUllis.length-1;
}
// 如果索引是索引的长度（最后一张图再后一张图） 他应该是跳到第一张图的位置 进行循环切换
if(this.index == this.oUllis.length){
// 第一张图的位置就是索引 是 0
this.index = 0;
}
// 给对应的index标签定义透明度为1
this.oUllis[this.index].style.opacity = 1;
// 调用olli 焦点设定样式方法.
this.setActive();
}
// 自动轮播方法
// 按照时间间隔,每次执行调用 this.change() 方法
// 默认轮播图向右循环轮播
autoLoop(){
this.time = setInterval(()=>{
this.change('right')
},3000)
}
// 鼠标移入,停止定时器，显示左右点击按钮；鼠标移出继续执行自动轮播函数，隐藏按钮
overOut(){
this.ele.addEventListener('mouseover',()=>{
// 鼠标移入停止定时器，显示左右点击按钮；
clearInterval(this.time)
this.clickLR.style.display = "flex";
})
this.ele.addEventListener('mouseout',()=>{
// 移出重新执行自动轮播方法，隐藏按钮
this.autoLoop();
this.clickLR.style.display = "none";
})
}
// 鼠标按下,判断按下的方向,按照方向切换图片,
setClick(){
// 给this.ele添加事件,通过事件委托来判断
this.ele.addEventListener('mousedown',(e)=>{
// 点击标签name是left,是做轮播图左切换
// 调用change(),输入参数是left
if(e.target.getAttribute('name')== 'left'){
this.change('left');
this.span1.style.backgroundColor = "rgba(0, 0, 0, .2)";
}
// 点击标签name是right,是做轮播图右切换
// 调用change(),输入参数是right
if(e.target.getAttribute('name')== 'right'){
this.change('right');
this.span2.style.backgroundColor = "rgba(0, 0, 0, .2)";
}
// 如果点击标签name是olli,证明点击的是焦点按钮
if (e.target.getAttribute('name')== 'olli'){
// 获取当前点击标签的index属性的属性值,也就是索引下标
let ind = e.target.getAttribute('index');
// 让当前原始index值对应的标签,透明度为0
this.oUllis[this.index].style.opacity = 0;
// 将这个索引赋值给this.index
this.index = ind;
// 让新的index对应的标签,透明度为1
this.oUllis[this.index].style.opacity = 1;
// 调用olli 焦点设定样式方法.
this.setActive();
}
})
// 鼠标抬起按下时的样式消失
this.ele.addEventListener('mouseup',(e)=>{
if(e.target.getAttribute('name')== 'left'){
this.span1.style.backgroundColor = "rgba(0, 0, 0, .5)";
}
if(e.target.getAttribute('name')== 'right'){
this.span2.style.backgroundColor = "rgba(0, 0, 0, .5)";
}
})
}
// 获取olli,循环遍历,在索引对应的标签添加样式
setActive(){
const oOllis = this.ele.querySelectorAll('ol li');
// 循环遍历,如果ol>li索引,与index的索引相同,就设定样式
// 因为轮播图图片没有赋值,焦点按钮与轮播图图片是一一对应的关系
oOllis.forEach((val, k)=>{
// 先清除所有的样式
val.className='';
// 给索引与index相同的焦点,设定样式
if(k == this.index){
val.className = 'active';
}
})
}
}完成轮播图效果
点击olli焦点和span标签按钮都可以实现左右轮播切换。
轮播图
扫一扫
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
