html
准备轮播图的父级盒子
<div class="jd_banner">
<!-- 图片 -->
<ul>
<li>
<a href="#"> <img src="images/banner01.jpg" alt="" /> </a>
</li>
<li>
<a href="#"> <img src="images/banner02.jpg" alt="" /> </a>
</li>
<li>
<a href="#"> <img src="images/banner03.jpg" alt="" /> </a>
</li>
<li>
<a href="#"> <img src="images/banner04.jpg" alt="" /> </a>
</li>
<li>
<a href="#"> <img src="images/banner05.jpg" alt="" /> </a>
</li>
<li>
<a href="#"> <img src="images/banner06.jpg" alt="" /> </a>
</li>
<li>
<a href="#"> <img src="images/banner07.jpg" alt="" /> </a>
</li>
<li>
<a href="#"> <img src="images/banner08.jpg" alt="" /> </a>
</li>
</ul>
<!-- 小圆点 -->
<ol>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
js
1.注册onload事件
为什么要设置onload事件
答：获取元素只能等到html渲染完成才能获取成功，避免获取不到元素
window.addEventListener('load',function () {
});
2.获取元素
//获取元素
var banner = document.querySelector('.jd_banner');
var ul = banner.querySelector('ul');
//获取所有的ul下的li标签
var imgs = ul.children;
//获取ol下的小圆点标签
var poins = banner.querySelectorAll('ol li');
//获取单个li标签的高度
var liHeight = imgs[0].offsetHeight;
//获取单个li标签的宽度
var liWidth = imgs[0].offsetWidth;
//设置定时器间隔时间
var interval = 2000;
3.给父盒子定高
注意点：这个liHeight只是个数值，所以千万不能遗忘px
ul.style.height = liHeight+'px';
4.获取一张图片的宽度
作用：一张图片的宽度就是一个显示界面的宽度，根据图片的宽度，来移动图片
//获取单个li标签的宽度
var liWidth = imgs[0].offsetWidth;
5.封装清除过渡、添加过渡、水平偏移
清除过渡 retion(str) 需要一个参数，即操作的元素
添加过渡 addtion(str) 需要一个参数，即操作的元素
设置偏移objLate(obj,number) 需要两个参数，第一个是操作的元素，第二个是偏移的值
//封装清除过渡
function retion(str) {
str.style.transition = "none";
//封装添加过渡
function addtion(str) {
str.style.transition = ".5s";
}
//封装偏移
function objLate(obj,number) {
obj.style.transform = "translateX("+number+"px)";
}
6.设置三个位置，并初始化
初始位置.png
//初始化三个位置
//轮播完成位置
var prev ;
//正在轮播位置
var now ;
//准备轮播位置
var next;
//三个位置封装
// 值为最后一张图片的下标
prev = prev || imgs.length-1;
// 值为第一张图片的下标
now = now || "0";
// 值为第二张图片的下标
next = next || "1";
// 各就各位，偏移到指定位置
// imgs[prev].style.transform="translateX("+ (-liWidth)+"px)";
objLate(imgs[prev],-liWidth);
// imgs[now].style.transform = "translateX(0px)";
objLate(imgs[now],0);
// imgs[next].style.transform="translateX("+liWidth+"px)";
objLate(imgs[next],liWidth);
7.封装下一张的方法
playNext的过程.png
//显示下一张
function playNext() {
//首先清除结束区域的位置的过渡
// console.log(imgs[prev]);
retion(imgs[prev]);
//返回牌堆
// imgs[prev].style.transform = "tran";
objLate(imgs[prev],2*liWidth);
//开始交换位置
//向左走，当前图片要放到结束区域，now-->prev 需要过渡离开
prev = now ;
addtion(imgs[prev]);
objLate(imgs[prev],-liWidth);
//准备区域的图片开始进入展示区域 next-->now 需要过渡进入
now = next;
addtion(imgs[now]);
objLate(imgs[now],0);
//立刻准备下一张图片进入准备区域 不需要过渡
next++;
//判断是否为最后一张图片，如果是，加载第一张
if(next > imgs.length-1){
next = 0;
}
//准备图片就位
objLate(imgs[next],liWidth);
//小圆点同步
for ( var i = 0 ; i < poins.length ; i++) {
//清空所有小圆点的now的类名
poins[i].classList.remove('now');
}
// 给当前的对应的now的小圆点添加类名
poins[now].classList.add('now');
}
8.封装上一张的方法
playPrev.png
//显示上一张
function playPrev() {
//清除下一张准备
retion(imgs[next]);
//直接返回牌堆
objLate(imgs[next],2*liWidth);
//将当前的图片给准备区域 now--->next
next = now;
//添加过渡
addtion(imgs[next]);
//开始偏移
objLate(imgs[next],liWidth);
//把结束区域的图片放到当前区域
now = prev;
//添加过渡
addtion(imgs[now]);
//开始偏移
objLate(imgs[now],0);
//找上上张图片
prev--;
//判断当前prev是否为第一张
if(prev < 0){
prev = imgs.length-1;
}
//上上张图片就位
objLate(imgs[prev],-liWidth);
//同步小圆点
for ( var i = 0 ; i < poins.length ; i++) {
//清空所有小圆点的now的类名
poins[i].classList.remove('now');
}
// 给当前的对应的now的小圆点添加类名
poins[now].classList.add('now');
}
9.注册手指滑动事件
//记录开始位置的变量
var startX ;
//记录开始时间的变量
var startTime ;
//开始位置
ul.addEventListener('touchstart',function (e) {
//清除定时器 目的：阻止图片滚动
clearInterval(timeId);
//记录按下的位置
startX = e.touches[0].clientX;
//记录开始时间
startTime = new Date;
});
//触摸移动
ul.addEventListener('touchmove',function (e) {
//计算移动距离
var distrans = e.touches[0].clientX - startX;
//清除三个过渡
//清除当前的展示完成图片的效果
retion(imgs[prev]);
//清除当前的正在展示图片的过渡效果
retion(imgs[now]);
//清除当前的即将展示图片的过渡效果
retion(imgs[next]);
//设置移动
// 在当前的位置的基础上开始移动
objLate(imgs[prev],-liWidth+distrans);
objLate(imgs[now],0+distrans);
objLate(imgs[next],liWidth+distrans);
});
//触摸结束
ul.addEventListener('touchend',function (e) {
//手机离开移动的距离
var distrans = e.changedTouches[0].clientX - startX;
//触摸的时长
var time = new Date - startTime;
//如果右滑超过三分之一图片的宽度切换上一张，或则滑屏时间小于100ms且滑动距离大于100px，同样显示上一张
if(distrans > liWidth/3 || distrans > 100 && time <100){
//显示上一张
playPrev();
}else if(distrans < -liWidth/3 || distrans < -100 && time <100){
// 如果左滑超过三分之一图片的宽度切换下一张，或则滑屏时间小于100ms且滑动距离大于100px，同样显示下一张
//显示下一张
playNext();
}else{
//不足以切换的，返回当前位置
// 添加过渡返回当前位置
addtion(imgs[prev]);
addtion(imgs[now]);
addtion(imgs[next]);
//设置移动
objLate(imgs[prev],-liWidth);
objLate(imgs[now],0);
objLate(imgs[next],liWidth);
}
//开启定时器
timeId = setInterval(playNext,interval);
});
10.设置resize事件
作用：根据窗口的大小的改变，图片的尺寸也会发生改变，重新获取宽度，从当前位置初始化每张图片
window.addEventListener('resize',function () {
liWidth = banner.offsetWidth
// 获取图片的高度
ul.style.height = imgs[0].offsetHeight + 'px'
//清除三个过渡
retion(imgs[prev]);
retion(imgs[now]);
retion(imgs[next]);
//设置移动
objLate(imgs[prev],-liWidth);
objLate(imgs[now],0);
objLate(imgs[next],liWidth);
});
网友评论