一、基本结构
1. html
<div class="banner">
<ul class="lunbo clearfix">
<li><a href="#"><img src="uploads/banner3.jpg"></a></li>
<li><a href="#"><img src="uploads/banner1.jpg"></a></li>
<li><a href="#"><img src="uploads/banner2.jpg"></a></li>
<li><a href="#"><img src="uploads/banner3.jpg"></a></li>
<li><a href="#"><img src="uploads/banner1.jpg"></a></li>
</ul>
<ul class="dot">
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
2. css
*{
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.banner {
position: relative;
overflow: hidden;
}
.lunbo img {
width: 100%;
}
.lunbo {
position: relative;
left: -100%;
width: 500%;
}
.lunbo li {
float: left;
width: 20%;
}
.dot {
position: absolute;
right: 0;
bottom: 8px;
}
.dot li {
float: left;
width: 5px;
height: 5px;
border-radius: 2px;
margin-right: 5px;
background-color: #fff;
transition: all .3s;
}
.dot li.current {
width: 12px;
}
二、功能
1. 设置定时器 自动播放轮播图 + 无缝对接
注意:监听transitionend事件以便于实现无缝对接
classList的使用:
(1)element.classList.add('class名') --增添class类名
(2)element.classList.remove('class名') --删除class类名
(3)element.classList.toggle('class名') --切换class类名
var banner = document.querySelector('.banner');
var lunbo = banner.children[0];
var dot = document.querySelector('.dot');
var bannerWidth = banner.offsetWidth;
var bannerIndex = 0;
var timer = setInterval(function(){
bannerIndex++;
var move = -bannerIndex * bannerWidth;
lunbo.style.transition = 'all .3s';
lunbo.style.transform = 'translateX('+ move +'px)';
}, 1000);
lunbo.addEventListener('transitionend', function(){
if(bannerIndex >= lunbo.children.length - 2) {
bannerIndex = 0;
var move = -bannerIndex * bannerWidth;
lunbo.style.transition = 'none';
lunbo.style.transform = 'translateX('+ move +'px)';
} else if(bannerIndex < 0) {
bannerIndex = lunbo.children.length - 3;
var move = -bannerIndex * bannerWidth;
lunbo.style.transition = 'none';
lunbo.style.transform = 'translateX('+ move +'px)';
}
dot.querySelector('.current').classList.remove('current');
dot.children[bannerIndex].classList.add('current');
})
2. 滑动轮播图
(1)实现拖动效果
var startX = 0;
var moveX = 0;
var flag = false; //用于检测用户是否没有移动
banner.addEventListener('touchstart', function(e){
startX = e.targetTouches[0].pageX;
clearInterval(timer);
})
banner.addEventListener('touchmove', function(e) {
moveX = e.targetTouches[0].pageX - startX;
var move = -bannerIndex * bannerWidth + moveX;
lunbo.style.transition = 'none';
lunbo.style.transform = 'translate('+ move +'px)';
})
(2)通过滑动范围的大小进行下一张图的展示(回弹或下一张)
banner.addEventListener('touchend', function(e) {
if(flag) {
if(Math.abs(moveX) > 50) {
if(moveX > 0) {
bannerIndex--;
}else {
bannerIndex++;
}
var move = -bannerIndex * bannerWidth;
lunbo.style.transition = 'all .3s';
lunbo.style.transform = 'translate('+ move +'px)';
}else {
var move = -bannerIndex * bannerWidth;
lunbo.style.transition = 'all .1s';
lunbo.style.transform = 'translate('+ move +'px)';
}
}
clearInterval(timer);
timer = setInterval(function(){
bannerIndex++;
var move = -bannerIndex * bannerWidth;
lunbo.style.transition = 'all .3s';
lunbo.style.transform = 'translateX('+ move +'px)';
}, 1000);
})