移动端 仿京东轮播图
CSS 部分
- /* 轮播图 */
- .jd_banner {
- width: 100%;
- overflow: hidden;
- position: relative;
- }
- .jd_banner ul:first-child {
- width: 1000%;
- transform: translateX(-10%);
- -webkit-transform: translateX(-10%);
- }
- .jd_banner ul:first-child li {
- width: 10%;
- float: left;
- }
- .jd_banner ul:first-child li a {
- /*
- 去掉下间距(三种方法):
- 1. display:block;
- 2. font-size:0;
- 3. vertical-align: middle
- */
- display: block;
- width: 100%;
- }
- .jd_banner ul:first-child li a img {
- display: block;
- width: 100%;
- }
- .jd_banner ul:last-child {
- width: 118px;
- height: 6px;
- position: absolute;
- left: 50%;
- margin-left: -59px;
- bottom: 6px;
- }
- .jd_banner ul:last-child li {
- width: 6px;
- height: 6px;
- border: 1px solid #fff;
- border-radius: 50%;
- float: left;
- margin-left: 10px;
- }
- .jd_banner ul:last-child li:first-child {
- margin-left: 0;
- }
- .jd_banner ul:last-child .now {
- background-color: #fff;
- }
html 部分
JS 部分
- // 1. 自动轮播图且无缝 定时器, 过渡
- // 2. 点要随着图片的轮播改变 根据索引切换
- // 3. 滑动效果 利用 touch 事件完成
- // 4. 活动结束的时候, 如果滑动的距离不超过屏幕的 1/3 吸附回去 过渡
- // 5. 滑动结束的时候 如果滑动的距离超过屏幕的 1/3 切换 (上一张, 下一张) 根据华东的方向, 过渡
- var banner = function() {
- // 轮播图
- var banner = document.querySelector('.jd_banner');
- // 屏幕宽度
- var width = banner.offsetWidth;
- // 图片容器
- var imgBox = banner.querySelector('ul:first-child');
- // 点容器
- var pointBox = banner.querySelector('ul:last-child');
- // 所有的点
- var points = pointBox.querySelectorAll('li');
- // 过渡
- var addTransition = function() {
- imgBox.style.transition = 'all 0.2s';
- imgBox.style.webkitTranslate = 'all 0.2s';
- }
- // 位移
- var setTranslateX = function(translateX) {
- imgBox.style.transform = 'translateX(' + translateX + 'px)';
- imgBox.style.webkitTransform = 'translateX(' + translateX + 'px)';
- }
- // 清过渡
- var removeTransition = function() {
- imgBox.style.transition = 'none';
- imgBox.style.webkitTranslate = 'none';
- }
- // 程序的核心
- var index = 1; // 指的是索引为 1 的图片 这是默认显示的第一个图片 索引为 0 的图片是用来做无缝滑动的
- var timer = setInterval(function() {
- index++; // 第一次执行 index=2 指的是显示索引为 2 的图片 就是第 3 张图片
- // 加过渡
- addTransition();
- // 做位移
- setTranslateX(-index * width);
- }, 1000);
- // 最后一个动画结束的后 执行
- imgBox.addEventListener('transitionend', function() {
- if (index>= 9) {
- index = 1;
- // 瞬间定位
- // 清除过渡
- removeTransition();
- // 做位移
- setTranslateX(-index * width);
- }
- // 滑动的时候也需要做无缝
- else if (index <= 0) {
- index = 8;
- // 瞬间定位
- // 清除过渡
- removeTransition();
- // 做位移
- setTranslateX(-index * width);
- }
- // 根据索引设置索引点
- // 此时此刻 索引的范围是 1-8 而 索引点的范围是 0-7
- setPoints(index);
- });
- // 根据索引设置索引点
- var setPoints = function(index) { //index 范围 1-8
- // 清楚样式
- for (var i = 0; i <points.length; i++) {
- var point = points[i];
- point.classList.remove('now');
- }
- // 给对应的添加样式
- points[index - 1].classList.add('now');
- }
- // 绑定事件
- var startX = 0;
- var distanceX = 0;
- // 判断是否滑动 默认 false 没有滑动
- var isMoved = false;
- imgBox.addEventListener('touchstart', function(e) {
- // 清除自动滑动定时器
- clearInterval(timer);
- // 记录起始位置的 x 坐标
- startX = e.touches[0].clientX;
- });
- imgBox.addEventListener('touchmove', function(e) {
- // 记录滑动过程中的 x 坐标
- var moveX = e.touches[0].clientX;
- // 计算位移 有正负方向
- distanceX = moveX - startX;
- // 元素将要的定位 = 当前定位 + 手指移动距离
- var translateX = -index * width + distanceX;
- // 滑动 ---- 元素随着手指的滑动做位置的改变
- removeTransition();
- setTranslateX(translateX);
- isMoved = true;
- });
- // 4. 活动结束的时候, 如果滑动的距离不超过屏幕的 1/3 吸附回去 过渡
- // 5. 滑动结束的时候 如果滑动的距离超过屏幕的 1/3 切换 (上一张, 下一张) 根据滑动的方向, 过渡
- imgBox.addEventListener('touchend', function(e) {
- if (isMoved) {
- // 4 5 实现 要使用移动距离
- if (Math.abs(distanceX) < width / 3) {
- // 吸附回去 过渡
- addTransition();
- setTranslateX(-index * width);
- } else {
- // 切换
- // 右滑动 上一张
- if (distanceX> 0) {
- index--;
- }
- // 左滑动 下一张
- else {
- index++;
- }
- addTransition();
- setTranslateX(-index * width);
- }
- }
- // 最好做一次重置操作
- startX = 0;
- distanceX = 0;
- isMoved = false;
- // 设置定时器
- clearInterval(timer);
- timer = setInterval(function() {
- index++; // 第一次执行 index=2 指的是显示索引为 2 的图片 就是第 3 张图片
- // 加过渡
- addTransition();
- // 做位移
- setTranslateX(-index * width);
- }, 1000);
- });
- };
图片资源
l1.jp
l2.jp
l3.jp
l4.jp
l5.jp
l6.jp
l7.jp
l8.jp
来源: https://www.2cto.com/kf/201809/780366.html