JS实现某东移动web轮播图
移动web轮播图
参考实例，可以从中保存轮播图的图片，这里我们放入uploads的文件夹下，将八张图片一次改为l1.jpg,l2.jpg…（最后面都demo）
https://m.jd.com/
HTML
- 这里要放入十张图片，因为手指滑动的时候要从第一张滑动到最后一张，是无缝滑动，当然可以用原生的JS进行添加
- 最终我们可以通过移动ul来达到轮播的效果，所以ul的宽度要刚好放得下十张图片
- ol下的li是分页器，也就是我们看到的圆圈，类.current为选中状态
- clearfix类是清除浮动
<div class="jd_banner">
<ul class="jd_wrap clearfix">
<li><a href="javascript:;"><img src="uploads/l8.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l1.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l2.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l3.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l4.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l5.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l6.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l7.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l8.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l1.jpg" alt="">a>li>
ul>
<ol>
<li class="current">li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ol>
div>
css样式
.clearfix::before,
.clearfix::after{
content: "";
display: block;
height: 0;
line-height: 0px;
clear: both;
visibility: hidden;
}
.jd_banner {
max-width: 640px;
min-width: 320px;
margin: 100px auto;
width: 100%;
position: relative;
overflow: hidden;
}
.jd_banner .jd_wrap {
width: 1000%;
transform: translateX(-10%);
}
.jd_banner .jd_wrap li {
width: 10%;
float: left;
}
.jd_banner .jd_wrap li img {
width: 100%;
}
.jd_banner ol {
height: 10px;
position: absolute;
left: 50%;
bottom: 3px;
transform: translateX(-50%);
}
.jd_banner ol li {
width: 6px;
height: 6px;
float: left;
border: 1px solid #fff;
margin-left: 10px;
border-radius: 50%;
}
.jd_banner ol li.current {
background: #fff;
}
JS
- 我们主要通过控制index，translateX，监听过渡动画的结束（webkitTransitionEnd）来实现轮播
- 对index进行限制
- 相同的代码进行封装
- 优化代码
var jdCon = document.querySelector('.jd_banner')
var ul = document.querySelector('.jd_banner>.jd_wrap')
var index = 1
var li = ul.querySelectorAll('li')
var olLi = document.querySelectorAll('ol>li')
var imgWidth = li[0].offsetWidth
// 过渡移动的效果
var transit = function(move){
var move = move || 0
ul.style.transition = 'all 0.5s linear'
ul.style.transform = `translateX(${-imgWidth*index+move}px)`
}
// 瞬间定位效果
var moment = function(distanceMove){
var distanceMove = distanceMove || 0
ul.style.transform = `translateX(${-imgWidth*index+distanceMove}px)`
ul.style.transition = 'none'
}
window.onresize = function(){
imgWidth = li[0].offsetWidth
}
var timer1 = setInterval(function(){
index++;
transit()
}, 1000)
ul.addEventListener('webkitTransitionEnd', function(){
if(index>li.length-2){
index = 1
moment()
}
if(index<1){
index = li.length-2
moment()
}
document.querySelector('.current').classList.remove('current')
olLi[index-1].classList.add('current')
})
var distanceStart = 0;
var move = 0;
var distanceEnd = 0;
jdCon.addEventListener('touchstart',function(e){
clearInterval(timer1)
distanceStart = e.touches[0].clientX
})
jdCon.addEventListener('touchmove',function(e){
var distance = e.touches[0].clientX
move = distance - distanceStart
moment(move)
})
jdCon.addEventListener('touchend',function(){
if(move>imgWidth/2){
index--
transit()
}else if(move<-imgWidth/2){
index++
transit()
}else{
transit()
}
distanceStart = 0;
move = 0;
distanceEnd = 0;
timer1 = setInterval(function(){
index++;
transit()
}, 1000)
})
整体思路
- 首先做好布局，ul的子元素li要在一行上，无缝链接
- 利用css，ul的宽度为1000%， 设置transform: translateX(-10%);，使得不会显示展示给用户的最后一张图片，显示第一张图片
- 自动播放轮播图
- 利用定时器，让index每次加1，然后过渡滚动一张图片
var timer1 = setInterval(function(){
index++;
ul.style.transition = 'all 0.5s linear'
ul.style.transform = `translateX(${-imgWidth*index}px)`
}, 1000)
- 监听webkitTransitionEnd，过渡动画结束时，清除当前的类.current,给ol下的li[index]添加一个类
- 过渡动画结束后，如果index过大，我们要对其进行限制，当index为9，此时界面显示的是第十张图片，也就是用户看到的第一张图片，所以我们瞬间（在0s）让其移动到第一张，在令index=1
ul.addEventListener('webkitTransitionEnd', function(){
// 当时间过渡结束
// 添加.current
if(index>8){
// 当第一张移动完成后
// 瞬间让index变为1
ul.style.transform = `translateX(${-imgWidth}px)`
ul.style.transition = 'none'
index = 1
} document.querySelector('.current').classList.remove('current')
olLi[index-1].classList.add('current')
})
- ul跟随着手指的滑动而滑动，当手指滑动多少，ul跟着滑动多少
var distanceStart = 0;
var move = 0;
var distanceEnd = 0;
jdCon.addEventListener('touchstart',function(e){
clearInterval(timer1)
distanceStart = e.touches[0].clientX
})
jdCon.addEventListener('touchmove',function(e){
var distance = e.touches[0].clientX
move = distance - distanceStart
ul.style.transform = `translateX(${-imgWidth*index+move}px)`
ul.style.transition = 'none'
})
- 滑动结束时做吸附效果
- 向右滑动时，如果滑动大于图片二分之一的宽度，当手指放开则加上过渡动画效果移动到上一张图片，此时我们移动始终是控制index
if(move>imgWidth/2){
index--
ul.style.transition = 'all 0.5s linear'
ul.style.transform = `translateX(${-imgWidth*index}px)`
}
- 向左滑动时，如果滑动大于图片二分之一的宽度，当手指放开则加上过渡动画效果移动到下一张图片，此时我们移动始终是控制index
else if(move<-imgWidth/2){
index++
ul.style.transition = 'all 0.5s linear'
ul.style.transform = `translateX(${-imgWidth*index}px)`
}
- 其它情况保持显示现状的图片
else{
ul.style.transition = 'all 0.5s linear'
ul.style.transform = `translateX(${-imgWidth*index}px)`
}
- 最后所有的清0，开启定时器
- 相同代码封装，测试是否有bug，发现右滑有问题--------始终通过控制index来实现移动和切换ol分页器，要对index进行限制。对数字通过ul下的li.length来控制，将代码封装成可调用，可读性，逻辑性的代码
if(index<1){
ul.style.transform = `translateX(${-imgWidth*8}px)`
ul.style.transition = 'none'
index = 8
}
步骤
/*
获取 必须知道的 变量
处理
1: 不考虑过渡效果 实现自动播放
定时器中 index++
限制index的值
修改 轮播图ul的 位置
考虑到 索引从1开始
css 默认 让ul 往左边窜一个屏幕宽度
2: 根据索引li标签 给li添加类
监听滚动结束添加.current类
3:然切换有动画效果
使用css3中的transition
4:当我切换到 最后一张时 瞬间 切到 第一张
关闭过度
瞬间切换到第一张
5:过渡结束知识点
由于 我们在修改 ul的位置时 会使用过度
当注册了 过渡结束事件之后,每次 过渡完毕 都会 调用该事件
将 判断 index 是否 越界 以及 修改 索引的 代码 全部 迁移到 过渡结束事件中
6: 使用touch事件,实现 手指 拨动 ul滑动 效果
7：封装优化代码
*/
疑问
- 宽高必须考虑到移动web的适配方案
- 可能大家会把ul进行定位，ul定位（absolute），我们就无法把父盒子撑开，也就是父盒子jd_banner就没有高度，到时ol也很难定位，影响页面布局等问题
- 直接给父盒子设置高度，但是我们这个高度不好设置，因为不同的屏幕图片高度是不一致的
- 使用translateX来移动逻辑会更简单些
- 注意要样式重置，比如img要去掉基线
- clearfix可以不加，因为父盒子jd_banner已经设置overflow: hidden;会触发bfc
- 实际开发中最好使用zetop.js或则swiper.js来提高我们的开发效率
DEMO
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Documenttitle>
<style>
*{
padding: 0;
margin: 0;
}
ol,ul{
list-style: none;
}
.clearfix::before,
.clearfix::after{
content: "";
display: block;
height: 0;
line-height: 0px;
clear: both;
visibility: hidden;
}
.jd_banner {
max-width: 640px;
min-width: 320px;
margin: 100px auto;
width: 100%;
position: relative;
overflow: hidden;
}
.jd_banner .jd_wrap {
width: 1000%;
transform: translateX(-10%);
}
.jd_banner .jd_wrap li {
width: 10%;
float: left;
}
.jd_banner .jd_wrap li img {
width: 100%;
}
.jd_banner ol {
height: 10px;
position: absolute;
left: 50%;
bottom: 3px;
transform: translateX(-50%);
}
.jd_banner ol li {
width: 6px;
height: 6px;
float: left;
border: 1px solid #fff;
margin-left: 10px;
border-radius: 50%;
}
.jd_banner ol li.current {
background: #fff;
}
style>
head>
<body>
<div class="jd_banner">
<ul class="jd_wrap clearfix">
<li><a href="javascript:;"><img src="uploads/l8.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l1.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l2.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l3.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l4.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l5.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l6.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l7.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l8.jpg" alt="">a>li>
<li><a href="javascript:;"><img src="uploads/l1.jpg" alt="">a>li>
ul>
<ol>
<li class="current">li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ol>
div>
body>
<script>
var jdCon = document.querySelector('.jd_banner')
var ul = document.querySelector('.jd_banner>.jd_wrap')
var index = 1
var li = ul.querySelectorAll('li')
var olLi = document.querySelectorAll('ol>li')
var imgWidth = li[0].offsetWidth
// 过渡移动的效果
var transit = function(move){
var move = move || 0
ul.style.transition = 'all 0.5s linear'
ul.style.transform = `translateX(${-imgWidth*index+move}px)`
}
// 瞬间定位效果
var moment = function(distanceMove){
var distanceMove = distanceMove || 0
ul.style.transform = `translateX(${-imgWidth*index+distanceMove}px)`
ul.style.transition = 'none'
}
window.onresize = function(){
imgWidth = li[0].offsetWidth
}
var timer1 = setInterval(function(){
index++;
transit()
}, 1000)
ul.addEventListener('webkitTransitionEnd', function(){
if(index>li.length-2){
index = 1
moment()
}
if(index<1){
index = li.length-2
moment()
}
document.querySelector('.current').classList.remove('current')
olLi[index-1].classList.add('current')
})
var distanceStart = 0;
var move = 0;
var distanceEnd = 0;
jdCon.addEventListener('touchstart',function(e){
clearInterval(timer1)
distanceStart = e.touches[0].clientX
})
jdCon.addEventListener('touchmove',function(e){
var distance = e.touches[0].clientX
move = distance - distanceStart
moment(move)
})
jdCon.addEventListener('touchend',function(){
if(move>imgWidth/2){
index--
transit()
}else if(move<-imgWidth/2){
index++
transit()
}else{
transit()
}
distanceStart = 0;
move = 0;
distanceEnd = 0;
timer1 = setInterval(function(){
index++;
transit()
}, 1000)
})
script>
html>