理解需求
做前端开发，我们常常需要搞定这样几个事儿：移动距离没超个子元素宽度一半就回到起点；如果过了，就要翻页。还有，不能忘了设置transform和z-index属性，这都能帮助咱们给用户带来更直观的感觉，更好地理解咱们的网站~那咋实现？别急，接着往下看！让我用通俗易懂的话跟大家谈谈HTML、CSS和JavaScript怎么帮咱们搞定这个问题。
HTML与CSS布局
首先，做这个轮播功能得先搞定HTML部分，用u1标签串起来，每个li就是个小项目。然后？ul它就是这帮小家伙们的大家庭咯。别忘了给ul加点CSS，让它横过来排布，宽度就设成小项目宽度的50%，这样才能看到换页效果。接下去，每个小项目都给他加几个transform跟z-index，待会儿有用滴~
//html
item-1
item-2
item-3
item-4
item-5
JavaScript实现逻辑
//css
.carousel{
height: 50%;
position: relative;
overflow: hidden;
}
.item {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
接下来咋整？要用Javascript搞出点互动逻辑呗！先造个两面链表，就是把轮播玩意儿里所有东西都串起来。这样就能随时随地找寻前后两个家伙，实现所谓的环形队列！然后，把每个小元素一个个加进链表，顺带设置好它们的旋转属性还有挡板高度什么的。
触摸事件处理
function Node(data) {
this.data = data;
this.prev = null;
this.next = null;
this.index = -1;
}
//双向循环列表
function LinkList() {
var _nodes = [];
this.head = null;
this.last = null;
if (typeof this.append !== "function") {
LinkList.prototype.append = function (node) {
if (this.head == null) {
this.head = node;
this.last = this.head;
}
else {
this.head.prev = node;
this.last.next = node;
node.prev = this.last;
node.next = this.head;
this.last = node;
}
node.index = _nodes.length; //务必在push前设置node.index
_nodes.push(node);
}
}
}
要跟上用户的手势节奏，就要重视touchstart、touchmove和touchend三个节点在touchstart里记下按下去的那一刻手指在哪儿；而touchmove，就看手扫了多远，然后相应地让屏幕跟着动起来；最后到了touchend，就是算算手指到底放在哪儿，还要根据移动距离看看是否需要切换界面元素。
Carousel库封装
var _container = document.querySelector("." + containerClass);
var _items = document.querySelectorAll("." + itemClass);
var list = loop ? new LinkList() : new SingleList();
for(var i = 0; i < _items.length; i++) {
list.append(new Node(_items[i]));
}
var _prev = null; //保存之前显示的元素
var _current = list.head; //保存当前显示的元素，默认为第一个元素
var _normalZIndex = _current.data.style.zIndex; //未显示元素的z-index值
var _activeZIndex = _normalZIndex + 1; //当前显示元素的z-index值
var _itemWidth = _current.data.offsetWidth; //子元素宽度
positionItems(); //初始化元素位置
zindexItems(_current, _activeZIndex); //将当前元素及其左右元素的z-index加1
为了程序好用又好修，我们把轮播功能做成了一个小工具包，既能让代码变得简单易懂，还能用上像prev(上一页)和next(下一页)这种好用的快捷键~
优化与扩展
除了基础的功能，你还能让代码变得更高级、更灵活！比如添加过渡效果，开启自动播放，搞个响应式设计提高用户友好度等等。同时别忘了关注兼容性和性能优化，保证这个轮播插件能用好几种设备上，而且操作起来顺溜无比。
_container.addEventListener("touchstart", function(e) {
// e.preventDefault();//取消此行代码的注释会在该元素内阻止页面纵向滚动
var touch = e.touches[0];
startX = touch.clientX; //保存手指按下时的位置
startY = touch.clientY;
_container.style.webkitTransition = ""; //取消动画效果
startT = new Date().getTime(); //记录手指按下的开始时间
isMove = false;
transitionItems(_prev, false); //取消之前元素的过渡
transitionItems(_current, false); //取消当前元素的过渡
}, false);
总结与展望
搞定！你已经学会怎么设置移动距离和切换元素的前端功能了？这种互动形式让网页更有活力，也能让用户看起来心情很好！以后科技越来越发达，我们还会继续优化这个功能，结合新技术，做出更好玩的轮播区域！
_container.addEventListener("touchmove", function(e) {
// e.preventDefault();//取消此行代码的注释会在该元素内阻止页面纵向滚动
var touch = e.touches[0];
var deltaX = touch.clientX - startX; //计算手指在X方向滑动的距离
var deltaY = touch.clientY - startY; //计算手指在Y方向滑动的距离
//如果X方向上的位移大于Y方向，则认为是左右滑动
if (Math.abs(deltaX) > Math.abs(deltaY)){
translate = deltaX > _itemWidth ? _itemWidth : deltaX;
translate = deltaX < -_itemWidth ? -_itemWidth : deltaX;
//同时移动当前元素及其左右元素
moveItems(translate);
isMove = true;
}
}, false);
。
评论0