原生js 制作的轮播图
今天学习了一个原生js轮播图的方法。
效果图如下
image.png
通过点击上下页和中间的点进行翻页，
通过改变图片的z-index值来实现效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wheel-carousel</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="carousel">
<div class="panels">
<a href="#"><img src="./css/1.jpg" alt=""></a>
<a href="#"><img src="./css/2.jpg" alt=""></a>
<a href="#"><img src="./css/3.jpg" alt=""></a>
<a href="#"><img src="./css/4.jpg" alt=""></a>
</div>
<div class="action">
<span class="pre">上一页</span>
<span class="next">下一页</span>
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
*{
margin: 0;padding: 0;
}
.carousel{
max-width: 400px;
margin-top: 60px;
}
.carousel .panels {
position: relative;
height: 100%;
overflow: hidden;
height: 200px;
}
.carousel .panels > a{
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
.carousel .panels > a:first-child{
z-index: 10;
}
.carousel .panels img{
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel .action{
display: flex;
font-size: 12px;
color: #999;
margin-top: 8px;
user-select:none;
}
.carousel .action .pre{
order: 1;
cursor: pointer;
}
.carousel .action .dots{
order: 2;
flex: 1;
text-align: center;
}
.carousel .action .next{
order: 3;
cursor: pointer;
}
.carousel .dots >span{
display: inline-block;
width: 6px;
height: 4px;
background: #eee;
border-radius: 2px;
cursor: pointer;
}
.carousel .dots > span.active{
width: 10px;
background: #aaa;
}
const $ = s=>document.querySelector(s)
const $$ = s=>document.querySelectorAll(s)
//事件代理
$('.carousel .dots').onclick = function(e){
if(e.target.tagName !== 'SPAN') return
let index = Array.from($$('.carousel .dots span')).indexOf(e.target)
setDots(index)
setPanels(index)
}
$('.pre').onclick = function(e){
let index = Array.from($$('.carousel .dots span')).indexOf($('.carousel .dots .active'))
//避免index值为负数
index = (index-1 + $$('.carousel .dots span').length) % $$('.carousel .dots span').length
setDots(index)
setPanels(index)
}
$('.next').onclick = function(e){
let index = Array.from($$('.carousel .dots span')).indexOf($('.carousel .dots .active'))
//避免index值为负数
index = (index+1) % $$('.carousel .dots span').length
setDots(index)
setPanels(index)
}
function setDots(index){
$$('.carousel .dots span').forEach(dot => dot.classList.remove('active'))
$$('.carousel .dots span')[index].classList.add('active')
}
function setPanels(index){
$$('.carousel .panels a').forEach(penel => penel.style.zIndex = 1)
$$('.carousel .panels a')[index].style.zIndex = 10
}
刚刚我用了最原始的方式实现了轮播图
假设轮播图变多了没有办法复用，因此我们把这个轮播图封装成一个组件
class Carousel {
constructor(root){
this.root = root
this.dotsCt = root.querySelector('.dots')
this.dots = Array.from(root.querySelectorAll('.dots > span'))
this.panels = Array.from(root.querySelectorAll('.panels > a'))
this.pre = root.querySelector('.action .pre')
this.next = root.querySelector('.action .next')
this.bind()
}
bind(){
// 注意箭头函数e如果用function(e) this指向会变成 dotsCt
this.dotsCt.onclick = e => {
if(e.target.tagName !== 'SPAN') return
var index = this.dots.indexOf(e.target)
this.setDots(index)
this.setPanels(index)
}
this.pre.onclick = e=>{
let index =this.dots.indexOf(this.root.querySelector('.dots .active'))
//避免index值为负数
index = (index-1 + this.dots.length) % this.dots.length
this.setDots(index)
this.setPanels(index)
}
this.next.onclick = e => {
let index =this.dots.indexOf(this.root.querySelector('.dots .active'))
//避免index值为负数
index = (index+1) % this.dots.length
this.setDots(index)
this.setPanels(index)
}
}
setDots(index){
this.dots.forEach(dot => dot.classList.remove('active'))
this.dots[index].classList.add('active')
}
setPanels(index){
this.panels.forEach(penel => penel.style.zIndex = 1)
this.panels[index].style.zIndex = 10
}
}
document.querySelectorAll('.carousel').forEach(carousel => {
new Carousel(carousel)
})
网友评论