Inspired by thorns, it does not feel grief; tears off the can, nor is sad.
Packaging a mobile terminal carousel map, moving carousel Figure end of it! And the pc not the same, not the same event, the trigger conditions are not the same, so today to encapsulate a basic diagram carousel.
Surely we all know, mobile end Well, the screen is not as large, the size of the screen depends on the manufacturer, so, so we use flow layout, can it !!
The first step, HTML basic style
首先,咱先先出基本的轮播图样式,
<div class="container">
<ul>
<li>
<img src="images/l1.jpg">
</li>
<li>
<img src="images/l2.jpg">
</li>
<li>
<img src="images/l3.jpg">
</li>
<li>
<img src="images/l4.jpg">
</li>
</ul>
</div>
This style is not the problem, a big box wrapped ul needs to move, container movement as the viewport, ul as a box motion, which if there is a problem, may wish to go back and learn HTML ... Well, then write css.
The second part, three parameter style
body {
margin: 0;
}
.container {
width: 100%;
/* 当子元素不缩放的时候,将会占4个屏幕的宽度,所以需要溢出影藏 */
overflow: hidden;
}
.container ul {
list-style: none;
margin: 0;
padding: 0;
/* 子元素需要运用flex,故将父元素设为flex布局 */
display: flex;
}
.container ul li {
/*因为父盒子设为flex布局,所有的图片都会在一排缩放进行显示,所以将它们设置为不缩放*/
flex-shrink: 0;
width: 100%;
}
.container img {
vertical-align: top;
width: 100%;
}
Style has been written out, the next we write js, js applied to the inside of a function, that is, the left sliding function of the right plan, do not do too much to explain here, my blog there are packages of this function,
Here the idea for analysis, code analysis shining:
1. First big box acquired in the acquired child elements, i.e. viewport
2. Here describes a method, a method can be acquired document.documentElement.clientWidth width of the element;
3. set a variable corresponding to the index of the carousel of FIG,
4. the sliding distance is set to global variables
must first slide the trigger event, where you have to calculate the current position, since the parameters to be used is determined, when the image can be drag, but the problem arose when I clicked on the next time, back to the starting position, the position plus the current sliding distance, it can avoid this problem before we have to use, then use the left and right slide plan events, do not make too many reports, because there is no technical difficulty ... when the left and right slide plan to achieve, new problems have emerged, that is animation queue, when I quickly slide, the picture will not be smooth drag, it is necessary to remove an animation, it is scrollContainer.style.transition = 'none';
<script type="text/javascript">
//轮播图的当前位置 -index * 一张图片的宽度
var container = document.querySelector('.container');
var scrollContainer = container.children[0];
// 屏幕的宽度
var sw = document.documentElement.clientWidth;
// 轮播图的索引
var index = 0;
// 滑动距离
var distance = 0;
swipe(container, {
swipeLeft: function() {
// 如果当前的滑动距离超过了屏幕宽度的一半 让他滑动到下一张
if (Math.abs(distance) > sw / 2) {
if (index < 3) {
index++;
}
}
// 为滑动添加过渡动画
scrollContainer.style.transition = 'transform .6s';
// 让ul滚动
scrollContainer.style.transform = 'translateX(' + -index * sw + 'px)';
},
swipeRight: function() {
// 如果当前的滑动距离超过了屏幕宽度的一半 让他滑动到下一张
if (Math.abs(distance) > sw / 2) {
if (index > 0) {
index--;
}
}
// 为滑动添加过渡动画
scrollContainer.style.transition = 'transform .6s';
// 让ul滚动
scrollContainer.style.transform = 'translateX(' + -index * sw + 'px)';
},
drag: function(e) {
// 滑动距离 e.touches[0].pageX实际上就是moveX
distance = e.touches[0].pageX - e.info.startX;
// 轮播图的当前位置加上滚动距离
var current = -index * sw + distance;
// 在手指拖动轮播图的时候禁止过渡动画
scrollContainer.style.transition = 'none';
scrollContainer.style.transform = 'translateX(' + current + 'px)';
}
});
// 下面为封装好的手势函数
function swipe(el, options) {
var startX = 0;
var startY = 0;
var moveX = 0;
var moveY = 0;
var disX = 0;
var disY = 0;
// 没有发生touchmove事件
var isMove = false;
// 默认值
var defaults = {
swipeLeft: function() {},
swipeRight: function() {},
swipeDown: function() {},
swipeUp: function() {},
drag: function() {}
}
// 如果用户传参了 就用用户传的 如果没传 就用默认值
// for (var attr in options) {
// defaults[attr] = options[attr];
// }
// 对象覆盖 用第二个参数对象覆盖第一个参数对象 且覆盖结果会影响到原对象
Object.assign(defaults, options);
// 记录开始滑动的坐标
el.addEventListener('touchstart', function(e) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
disX = startX - el.offsetLeft;
disY = startY - el.offsetTop;
});
// 记录滑动过程中的坐标
el.addEventListener('touchmove', function(e) {
moveX = e.touches[0].pageX;
moveY = e.touches[0].pageY;
isMove = true;
// 将touchstart事件发生时侯的x和y保存到当前的事件对象中
e.info = {
startX: startX,
startY: startY,
disX: disX,
disY: disY
}
// 将在touchmove事件发生的时候要做的事情写在函数外面 => drag
defaults.drag.call(el, e);
});
// 判断垂直滑动还是水平滑动 ...
el.addEventListener('touchend', function(e) {
// 如果发生了滑动事件
if (isMove) {
// 水平边长
var absX = Math.abs(moveX - startX);
// 垂直边长
var absY = Math.abs(moveY - startY);
if (absX > absY) {
// 水平
// console.log('水平');
if (moveX - startX > 0) {
// console.log('向右滑动');
defaults.swipeRight.call(el, e);
} else {
//console.log('向左滑动');
defaults.swipeLeft.call(el, e);
}
} else {
// 垂直
// console.log('垂直');
if (moveY - startY > 0) {
// console.log('向下滑动');
defaults.swipeDown.call(el, e);
} else {
// console.log('向上滑动');
defaults.swipeUp.call(el, e);
}
}
}
// 初始isMove变量方便 下回触发事件的时候做判断
isMove = false;
});
}
</script>
Here I enclose my QQ: 2489757828 a problem, then you can explore with
my private blog: Lida Xuan