とげに触発され、それが悲しみを感じることはありません。缶をオフに涙、また悲しいです。
カルーセル図これで終わり！とPCではないと同じではなく、同じイベントを移動する移動端末カルーセルマップを、包装、トリガ条件がそう今日は基本図カルーセルをカプセル化するために、同じではありません。
確かに我々はすべて、モバイルエンドまあを知って、画面は画面のサイズはメーカーによって異なり、同じ大きさではないので、私たちはそれができ、フローレイアウトを使用します！
最初のステップ、HTMLの基本的なスタイル
首先,咱先先出基本的轮播图样式,
<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>
このスタイルは問題ではありませんが、大きな箱はULは、ULは問題がある場合は、戻ってHTMLを学びたいと思うかもしれボックスモーション、と...まあ、その後、CSSを書くビューポートとして、コンテナの動きを移動する必要があるラップ。
第二部、3つのパラメーター・スタイル
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%;
}
スタイルが書き出されている、我々はJSを書く次回は、私のブログには、この機能のパッケージがある、つまり、右計画の機能をスライド左は、ここで説明するのあまりをしない、関数の内部に適用されるJS
ここでは、分析のためのアイデアは、コード分析シャイニング：
取得し、子要素で取得した1.まず大きな箱、すなわちビューポート
2.ここでは、この方法は、要素のdocument.documentElement.clientWidth幅を取得することができます方法を説明します。
3は、図1のカルーセルのインデックスに対応する変数を設定し、
前記摺動距離は、グローバル変数に設定されている
パラメータが決定され使用されるので、画像が可能な場合、最初に、現在の位置を計算する必要がトリガイベントを、スライドしなければなりません私たちは、その後、左右のスライドを使用使用する必要があります前に、バック開始位置、位置プラス現在の摺動距離に、それはこの問題を回避することができ、次回をクリックしたときにドラッグが、問題が発生しました計画のイベントには、画像が滑らかでなくなり、左右のスライド計画が達成するための技術的な難しさ...が存在しないため、新たな問題が浮上している、私はすぐにスライドさせたときに、それは、アニメーションキューで、あまりにも多くの報告をしませんドラッグは、scrollContainer.style.transition =「なし」であり、アニメーションを除去する必要があります。
<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>
ここで私は私のQQを囲む：2489757828問題、そして、あなたが探索することができ
、私のプライベートのブログ：リダ玄