**轮播图实现效果 自动轮播 点击左右切换 点击焦点切换
本文介绍利用不同背景色作图片 实现效果**
网页结构 html 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.banner {
color: white;
width: 600px;
height: 400px;
border: 5px solid black;
margin: 200px auto;
/* overflow: hidden; */
position: relative;
}
.banner .img_box {
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;
}
.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>
</head>
<body>
<div class="banner" id="box1">
<!-- 放置所有轮播图的盒子 -->
<ul class="img_box">
<li style="background-color: burlywood;" class="active" >1</li>
<li style="background-color: royalblue;" >2</li>
<li style="background-color: greenyellow;">3</li>
<li style="background-color: pink;">4</li>
<li style="background-color: turquoise;">5</li>
<li style="background-color: rgb(9, 10, 10);">6</li>
</ul>
<!-- 放置焦点的盒子 -->
<ol class="focus">
<!-- <li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li> -->
</ol>
<!-- 左右按钮 -->
<div class="left"><</div>
<div class="right">></div>
</div>
<div class="banner" id="box2">
<!-- 放置所有轮播图的盒子 -->
<ul class="img_box">
<li style="background-color: burlywood;">1</li>
<li style="background-color: royalblue;">2</li>
<li style="background-color: greenyellow;">3</li>
<li style="background-color: pink;">4</li>
<li style="background-color: turquoise;">5</li>
<li style="background-color: rgb(9, 10, 10);">6</li>
</ul>
<!-- 放置焦点的盒子 -->
<ol class="focus">
<!-- <li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li> -->
</ol>
<!-- 左右按钮 -->
<div class="left"><</div>
<div class="right">></div>
</div>
<script src="index1.js"></script>
</body>
</html>
js部分
class Banner{
constructor(ele){
this.banner = document.querySelector(ele)
this.imgBox = this.banner.querySelector('.img_box')
this.focus = this.banner.querySelector('.focus')
this.set()
this.index = 0//当前第几页
this.timer = 0
this.autoPlay()
this.over()
this.click()
}
// 原型内容
//1动态生成焦点
set(){
const imgNum = this.imgBox.children.length
for(let i = 0; i < imgNum; i++){
const newLi = document.createElement('li')
this.focus.appendChild(newLi)
if(i == 0){
newLi.classList.add('active')
}
newLi.dataset.id = i
newLi.classList.add('items')
}
}
//1.5切换
cut(type){
//先清除所有类名
this.imgBox.children[this.index].classList.remove('active')
this.focus.children[this.index].classList.remove('active')
if(type === true){
this.index ++
}else if(type === false){
this.index --
}else{
this.index = type
}
//边界判断
const imgNum = this.imgBox.children.length - 1
if( this.index < 0){
this.index = imgNum
}
if( this.index > imgNum){
this.index = 0
}
//添加对应类名
this.imgBox.children[this.index].classList.add('active')
this.focus.children[this.index].classList.add('active')
}
//2 定时器切换效果
autoPlay(){
const that = this
this.timer = setInterval(function(){
that.cut(true)
},1000)
}
//3 移入移出事件
over(){
this.banner.onmouseover = () =>{
clearInterval(this.timer)
}
this.banner.onmouseout= () =>{
this.autoPlay()
}
}
//3点击事件
click(){
this.banner.onclick = (e) =>{
if(e.target.className == 'right'){
this.cut(true)
}
if(e.target.className == 'left'){
this.cut(false)
}
if(e.target.className == 'items'){
this.cut(e.target.dataset.id - 0)
}
}
}
}
new Banner('#box1')
