电商移动Web实战项目（4）
定位轮播图
1-修改结构
2-修改样式
3-动态设置ul的高度
4-主体思路
改变index的值
通过index的值推算出上一张，下一张，当前张
添加过渡、做动画5-定时器切换轮播图
累加index
检测数据是否越界，推算出prev /now/next
去除其他li的过渡
当前活动的li添加过程
prev/now/next 进行移动切换6-触屏轮播图
触屏开始
清除定时器
记录起始坐标触屏移动
记录移动坐标
计算距离差
去除过渡
prev/now/next
跟随 移动触屏结束
判断是否要切换图片
改变index的值
推算prev/now/next 排他， 当前元素添加过渡
进行位移7-注意：
左滑：左边的盒子不需要加过渡
右滑：右边的盒子不需要加过渡
反弹回去时，都加过渡 //动态设置ul的高
function setHeight() {
document.querySelector('.jd-banner ul').style.height
= document.querySelector('.jd-banner ul img').offsetHeight + 'px';
}
//轮播图代码
function banner() {
var index = 0;
var now = 0;
var prev = 7;
var next = 1;
//获取元素
var banner = document.querySelector('.jd-banner');
var width = banner.offsetWidth;
//获取ul的宽
var lis = document.querySelectorAll('.jd-banner ul li');
//设置和检测数据合理性
function setData() {
if (index > 7) {
index = 0;
}
if (index < 0) {
index = 7;
}
prev = index - 1;
next = index + 1;
now = index;
if (prev < 0) {
prev = 7;
}
if (next > 7) {
next = 0;
}
}
//定时器切换轮播图
var timer = setInterval(function () {
index++;
//设置和检测数据合理性
setData();
//清除其他位移
lis.forEach(function (v, i) {
v.style.transition = 'none';
})
//添加过渡
lis[now].style.transition = 'all .3s';
lis[prev].style.transition = 'all .3s';
lis[next].style.transition = 'none';
//把图片移动到对应的地方
lis[now].style.transform = 'translateX(' + 0 + 'px)';
lis[prev].style.transform = 'translateX(' + (-width + 0) + 'px)';
lis[next].style.transform = 'translateX(' + (width + 0) + 'px)';
}, 2000)
var startX = 0;
var moveX = 0;
var distanceX = 0;
//触屏开始
banner.addEventListener('touchstart', function (e) {
clearInterval(timer);
startX = e.targetTouches[0].clientX;
})
//触屏移动
banner.addEventListener('touchmove', function (e) {
moveX = e.targetTouches[0].clientX;
distanceX = moveX - startX;
//移除过渡
lis[now].style.transition = 'none';
lis[prev].style.transition = 'none';
lis[next].style.transition = 'none'
//跟随手指移动
lis[now].style.transform = 'translateX(' + distanceX + 'px)';
lis[prev].style.transform = 'translateX(' + (-width + distanceX) + 'px)';
lis[next].style.transform = 'translateX(' + (width + distanceX) + 'px)';
}) //触屏结束
banner.addEventListener('touchend', function (e) {
var dir = '';
//记录手指画的方向
if (Math.abs(distanceX) > width / 3) {
if (distanceX > 0) {
index--;
dir = 'right';
}
if (distanceX < 0) {
index++;
dir = 'left';
}
setData();
//清除其他位移
lis.forEach(function (v, i) {
v.style.transition = 'none';
})
// 左滑 prev 不需要过渡
// 右滑 next 不需要过渡
lis[now].style.transition = 'all .3s';
lis[prev].style.transition = dir == 'right' ? 'none' : 'all 0.3s';
lis[next].style.transition = dir == 'left' ? 'none' : 'all 0.3s';
} else {
//添加过渡 ， 反弹回去 都加过渡效果
lis[now].style.transition = 'all .3s';
lis[prev].style.transition = 'all .3s';
lis[next].style.transition = 'all .3s';
}
//把图片固定到对应的地方
lis[now].style.transform = 'translateX(' + 0 + 'px)';
lis[prev].style.transform = 'translateX(' + (-width + 0) + 'px)';
lis[next].style.transform = 'translateX(' + (width + 0) + 'px)';
})
}swiper插件的使用
官网： https://3.swiper.com.cn/
关于tap事件与click事件
-
click事件在pc端非常用，但是在移动端会有300ms左右的延迟，比较影响用户的体验，300ms用于判断双击还是长按事件，只有当没有后续的的动作发生时，才会触发click事件
-
tap事件只要轻触了，就会触发，体验更好。
/* * 由于移动端的点击事件click 有300左右的延迟， 用户体验有待提升 * 希望 能用touch事件封装一个相应速度更快的 点击事件 tap * * touch判断为点击事件的条件： * * 1、触屏开始 到触屏结束 手指没有移动 * 2、接触屏幕的时间 小于指定的值 150ms * * * 满足以上两个条件 可以认为是点击事件触发了 * *//** 插件功能：* 给指定的元素 绑定优化后的移动的点击事件--- tap事件* 参数：* obj:要绑定优化后点击事件的元素* callback: 当点击事件触发 执行什么操作* */ var itcast = {
tap: function (obj, callback) {
if (typeof obj == 'object') {
//判断传入的obj是否为对象 var startTime = 0;
//记录起始事件 var isMove = false;
//记录是否移动 obj.addEventListener('touchstart', function () {
startTime = Date.now();
//获取当前时间戳
});
obj.addEventListener('touchmove', function () {
isMove = true;
//记录移动
});
obj.addEventListener('touchend', function (e) {
//判断是否满足点击的条件 if (!isMove && Date.now() - startTime < 150) {
//tap点击事件触发 //if (callback) {
// callback();
//
}
callback && callback(e);
}
//数据重置 isMove = false;
startTime = 0;
});
}
}
}
zepto框架介绍
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， **它与jquery有着类似的api**。 如果你会用jquery，那么你也会用zepto。
github地址
中文文档
zepto与jquery的区别
-
jquery针对pc端，主要用于解决浏览器兼容性问题，zepto主要针对移动端。
-
zepto比jquery轻量，文件体积更小
-
zepto封装了一些移动端的手势事件
zepto的基本使用
zepto的使用与jquery基本一致，zepto是分模块的，需要某个功能，就需要引入某个zepto的文件。
< script src = "zepto/zepto.js" > < / script > < script src = "zepto/event.js" > < / script > < script src = "zepto/fx.js" > < / script > < script > $(function () {
$(".box").addClass("demo");
$("button").on("click", function () {
$(".box").animate({
width: 500
}, 1000);
});
});
< / script >
zepto手势事件
zepto中根据touchstart touchmove touchend封装了一些常用的手势事件
tap
// 轻触事件,用于替代移动端的click事件，因为click事件在老版本中会有300ms的延迟
//穿透的问题 fastclick:swipe
//手指滑动时触发
swipeLeft //左滑
swipeRight //右滑
swipeUp //上滑
swipeDown //下滑媒体查询
媒体查询（Media Query）是CSS提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。
设备分类
| 分类 | 宽度范围 |
|---|---|
| 大屏设备 | >1200px |
| 中屏设备 | 992px~1200px |
| 小屏设备 | 768px~992px |
| 超小屏设备 | < 768px |
媒体查询的使用
需求：
响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。
媒体查询语法：
/*查询屏幕*/ @ media screen and 条件 {} /*条件的写法*/ /*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/ /*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/ @ media screen and(min - width: 1200px) {
.container {
width: 1170px;
background - color: red;
}
}
@ media screen and(min - width: 992px)and(max - width: 1200px) {
.container {
width: 970px;
background - color: blue;
}
}
@ media screen and(min - width: 768px)and(max - width: 992px) {
.container {
width: 750px;
background - color: yellow;
}
}
@ media screen and(max - width: 768px) {
.container {
width: 100 % ;
background - color: green;
}
}
弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。