js html 轮播图 支持移动端左右滑动 pc也能用
来源:互联网 发布:抢演唱会门票软件 编辑:程序博客网 时间:2024/06/06 03:49
引用:http://download.csdn.net/detail/zw200813ht/7326281
最初版本是这个。有几个bug修改了一下(滑动之后就不能自动滚动了),添加了一个helper方便调用和修改,添加了一些功能,都有注释。
原先是es6写法,后修改为es5写法:结构如下
swipe_helper.js
/** * Created by wuyakun on 2017/2/28. */function initSwipe(arg) { //提供参数用来修改position var banner = ''; //设置默认参数 const _auto = 5000; const _continuous = true; const _disableScroll = false; arg.auto = arg.auto || _auto; if (arg.continuous == 'undefined') arg.continuous = _continuous; if (arg.disableScroll == 'undefined') arg.disableScroll = _disableScroll; if (arg.url == 'undefined') return; //添加图片 var _div = ""; var addDiv = function (i) { _div += "<div>" + "<a onclick='onImgClick(" + i + "," + arg.callback + ")' href='javascript:void(0);'>" + "<img class='img-responsive' src='" + arg.url[i] + "' />" + "</a>" + "</div>"; }; for (var i = 0; i < arg.url.length; i++) { addDiv(i); } //添加下方 点点 var _li = ""; var addLi = function (j) { var cls = j == 0 ? 'cur' : '' ; _li += "<a class='positionA' href='javascript:void(0);'>" + "<li class='" + cls + "'></li>" + "</a>"; }; for (var j = 0; j < arg.url.length; j++) { addLi(j); } //组合 document.getElementById('swipeView').innerHTML = "<div class='addWrap'> " + "<div class='swipe' id='mySwipe'> " + "<div class='swipe-wrap'>" + _div + "</div> " + "</div> " + "<ul id='position'>" + _li + "</ul> " + "</div>"; var bullets = document.getElementById('position').getElementsByTagName('li'); banner = Swipe(document.getElementById('mySwipe'), { auto: arg.auto, continuous: arg.continuous, disableScroll: arg.disableScroll, callback: function (pos) { var i = bullets.length; while (i--) { bullets[i].className = ''; } bullets[pos].className = 'cur'; } }); //给下方的点点加上点击事件 var allPosition = $(".positionA"); var attrAllPosition = function (n) { $(allPosition[n]).click(function () { onPositionClick(n, banner) }); }; for (var n = 0; n < allPosition.length; n++) { attrAllPosition(n); }}/** * 当图片点击时 * @param index * @param callback */function onImgClick(index, callback) { callback(index);}/** * 当下方点点被点击时 * @param index * @param banner */function onPositionClick(index, banner) { banner.slide(index);}
swipe.js
/* * Swipe 2.0 * * Brad Birdsall * Copyright 2013, MIT License * */function Swipe(container, options) { "use strict"; // utilities var noop = function () { }; // 简单的无操作功能 var offloadFn = function (fn) { setTimeout(fn || noop, 0) }; // 卸载功能的执行 // 检查浏览器的功能 var browser = { addEventListener: !!window.addEventListener, touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch, transitions: (function (temp) { var props = ['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform']; for (var i in props) if (temp.style[props[i]] !== undefined) return true; return false; })(document.createElement('swipe')) }; // 如果没有根元素退出 if (!container) return; var element = container.children[0]; var slides, slidePos, width; options = options || {}; var index = parseInt(options.startSlide, 10) || 0; var speed = options.speed || 300; options.continuous = options.continuous ? options.continuous : true; function setup() { // 缓存的幻灯片 slides = element.children; //创建一个数组来存储每个幻灯片的当前位置 slidePos = new Array(slides.length); // 确定每个幻灯片的宽度 width = container.getBoundingClientRect().width || container.offsetWidth; element.style.width = (slides.length * width) + 'px'; // 栈元素 var pos = slides.length; while (pos--) { var slide = slides[pos]; slide.style.width = width + 'px'; slide.setAttribute('data-index', pos); if (browser.transitions) { slide.style.left = (pos * -width) + 'px'; move(pos, index > pos ? -width : (index < pos ? width : 0), 0); } } if (!browser.transitions) element.style.left = (index * -width) + 'px'; container.style.visibility = 'visible'; } function prev() { if (index) slide(index - 1); else if (options.continuous) slide(slides.length - 1); } function next() { if (index < slides.length - 1) slide(index + 1); else if (options.continuous) slide(0); } function slide(to, slideSpeed) { // 如果已经滑不要求 if (index == to) return; if (browser.transitions) { var diff = Math.abs(index - to) - 1; var direction = Math.abs(index - to) / (index - to); // 1:right -1:left while (diff--) move((to > index ? to : index) - diff - 1, width * direction, 0); move(index, width * direction, slideSpeed || speed); move(to, 0, slideSpeed || speed); } else { animate(index * -width, to * -width, slideSpeed || speed); } index = to; offloadFn(options.callback && options.callback(index, slides[index])); } function move(index, dist, speed) { translate(index, dist, speed); slidePos[index] = dist; } function translate(index, dist, speed) { var slide = slides[index]; var style = slide && slide.style; if (!style) return; style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = speed + 'ms'; style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)'; style.msTransform = style.MozTransform = style.OTransform = 'translateX(' + dist + 'px)'; } function animate(from, to, speed) { // 如果不是动画,只是重新定位 if (!speed) { element.style.left = to + 'px'; return; } var start = +new Date; var timer = setInterval(function () { var timeElap = +new Date - start; if (timeElap > speed) { element.style.left = to + 'px'; begin(); options.transitionEnd && options.transitionEnd.call(event, index, slides[index]); clearInterval(timer); return; } element.style.left = (( (to - from) * (Math.floor((timeElap / speed) * 100) / 100) ) + from) + 'px'; }, 4); } // 安装程序自动幻灯片 var interval; function begin() { stop(); interval = setTimeout(next, options.auto); } function stop() { clearTimeout(interval); } // 设置初始变量 var start = {}; var delta = {}; var isScrolling; // 设置事件捕获 var events = { handleEvent: function (event) { switch (event.type) { case 'touchstart': this.start(event); break; case 'touchmove': this.move(event); break; case 'touchend': offloadFn(this.end(event)); break; case 'webkitTransitionEnd': case 'msTransitionEnd': case 'oTransitionEnd': case 'otransitionend': case 'transitionend': offloadFn(this.transitionEnd(event)); break; case 'resize': offloadFn(setup.call()); break; } if (options.stopPropagation) event.stopPropagation(); }, start: function (event) { var touches = event.touches[0]; // 测量的起始值 start = { // 得到初始的触摸坐标 x: touches.pageX, y: touches.pageY, // 存储时间确定接触时间 time: +new Date }; // 用于测试的第一移动事件 isScrolling = undefined; // 复位三角洲和最后计算值 delta = {}; // 设置touchmove和touchend监听 element.addEventListener('touchmove', this, false); element.addEventListener('touchend', this, false); }, move: function (event) { // 确保一个触摸不捏刷 if (event.touches.length > 1 || event.scale && event.scale !== 1) return if (options.disableScroll) event.preventDefault(); var touches = event.touches[0]; // 计算改变后的 x 和 y delta = { x: touches.pageX - start.x, y: touches.pageY - start.y }; // 确定测试运行——一个滚动时间测试 if (typeof isScrolling == 'undefined') { isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) ); } // 如果用户没有试图垂直滚动 if (!isScrolling) { // 防止本机滚动 event.preventDefault(); // 停止幻灯片显示 stop(); // 如果第一个或最后一个滑动阻力增加 delta.x = delta.x / ( (!index && delta.x > 0 // if first slide and sliding left || index == slides.length - 1 // or if last slide and sliding right && delta.x < 0 // and if sliding at all ) ? ( Math.abs(delta.x) / width + 1 ) // determine resistance level : 1 ); // no resistance if false // 转化 1:1 translate(index - 1, delta.x + slidePos[index - 1], 0); translate(index, delta.x + slidePos[index], 0); translate(index + 1, delta.x + slidePos[index + 1], 0); } }, end: function (event) { // 计算持续时间 var duration = +new Date - start.time; // 确定滑动尝试触发下一个/上一页滑动 var isValidSlide = Number(duration) < 250 // if slide duration is less than 250ms && Math.abs(delta.x) > 20 // and if slide amt is greater than 20px || Math.abs(delta.x) > width / 2; // or if slide amt is greater than half the width // 如果尝试确定滑过去的开始和结束 var isPastBounds = !index && delta.x > 0 // 如果第一个幻灯片和幻灯片AMT大于0 || index == slides.length - 1 && delta.x < 0; // 或者如果最后一张幻灯片,幻灯片amt小于0 // 确定滑动方向(true:right, false:left) var direction = delta.x < 0; // 如果不垂直滚动 if (!isScrolling) { if (isValidSlide && !isPastBounds) { if (direction) { move(index - 1, -width, 0); move(index, slidePos[index] - width, speed); move(index + 1, slidePos[index + 1] - width, speed); index += 1; } else { move(index + 1, width, 0); move(index, slidePos[index] + width, speed); move(index - 1, slidePos[index - 1] + width, speed); index += -1; } options.callback && options.callback(index, slides[index]); } else { move(index - 1, -width, speed); move(index, 0, speed); move(index + 1, width, speed); } } // 取消touchmove和touchend事件监听器,直到touchstart再次调用 element.removeEventListener('touchmove', events, false) element.removeEventListener('touchend', events, false) }, transitionEnd: function (event) { if (parseInt(event.target.getAttribute('data-index'), 10) == index) { begin(); options.transitionEnd && options.transitionEnd.call(event, index, slides[index]); } } }; // 触发设置 setup(); // 如果适用则开始自动幻灯片 begin(); // 添加事件监听器 if (browser.addEventListener) { // 设置touchstart事件元素 if (browser.touch) element.addEventListener('touchstart', events, false); if (browser.transitions) { element.addEventListener('webkitTransitionEnd', events, false); element.addEventListener('msTransitionEnd', events, false); element.addEventListener('oTransitionEnd', events, false); element.addEventListener('otransitionend', events, false); element.addEventListener('transitionend', events, false); } //设置在窗口调整大小事件 window.addEventListener('resize', events, false); } else { window.onresize = function () { setup() }; // to play nice with old IE } // 公开Swipe API return { setup: function () { setup(); }, slide: function (to, speed) { stop(); slide(to, speed); }, prev: function () { // cancel slideshow stop(); prev(); }, next: function () { stop(); next(); }, getPos: function () { // return current index position return index; }, kill: function () { // 取消幻灯片 stop(); // reset element element.style.width = 'auto'; element.style.left = 0; // reset slides var pos = slides.length; while (pos--) { var slide = slides[pos]; slide.style.width = '100%'; slide.style.left = 0; if (browser.transitions) translate(pos, 0, 0); } // 删除事件侦听器 if (browser.addEventListener) { // remove current event listeners element.removeEventListener('touchstart', events, false); element.removeEventListener('webkitTransitionEnd', events, false); element.removeEventListener('msTransitionEnd', events, false); element.removeEventListener('oTransitionEnd', events, false); element.removeEventListener('otransitionend', events, false); element.removeEventListener('transitionend', events, false); window.removeEventListener('resize', events, false); } else { window.onresize = null; } } }}if (window.jQuery || window.Zepto) { (function ($) { $.fn.Swipe = function (params) { return this.each(function () { $(this).data('Swipe', new Swipe($(this)[0], params)); }); } })(window.jQuery || window.Zepto)}
swipe.css
body { margin: 0; padding: 0}.addWrap { position: relative; width: 1920px; height: 580px; background: #fff; margin: 0; padding: 0;}.addWrap .swipe { overflow: hidden; visibility: hidden; position: relative;}.addWrap .swipe-wrap { overflow: hidden; position: relative;}.addWrap .swipe-wrap > div { float: left; width: 100%; position: relative;}/*点点*/#position { position: absolute; bottom: 0; right: 0; padding-right: 8px; margin: 0; background: #00000000; /*opacity: 0.4;*/ width: 100%; /*filter: alpha(opacity=50);*/ text-align: center;}.positionA {}#position li { width: 70px; height: 8px; margin: 10px 8px; display: inline-block; border: 2px solid #fff; border-radius: 5px; background-color: rgba(0, 0, 0, 0);}#position li.cur { background-color: #42bd7e;}.img-responsive { display: block; max-width: 100%; height: auto;}
/** * Created by wuyakun on 2017/4/18. *//** * 设置banner * @type {string[]} */var url = ['./images/home/banner/banner1.jpg', './images/home/banner/banner2.jpg', './images/home/banner/banner3.jpg', './images/home/banner/banner4.jpg', './images/home/banner/banner5.jpg'];initSwipe({ url: url, callback: function (position) { console.log(position); window.location.href = "http://www.baidu.com"; }});
0 0
- js html 轮播图 支持移动端左右滑动 pc也能用
- 原生js写头部tab栏左右滑动支持移动端
- Swiper.js 实现移动端元素左右滑动
- js案例 移动端左右滑动touch+transform
- 手机端左右全屏滑动(加精)【判断PC还是移动端】
- 移动端能用手指滑动的轮播图插件
- 支持移动端和PC端的轻量级轮播图插件&&hammer.js教程
- PC端、移动端都可以用的图片轮播(左右滑动切换)插件及使用
- 移动端实现导航的左右滑动
- 移动端左右上下滑动识别
- 移动端图片左右滑动效果
- 移动端按钮组左右滑动
- 移动端html+css实现水平任意滚动(PC端也同理)
- 移动端html+css实现水平任意滚动(PC端也同理)
- 手机端左右滑动,不用写js(只有页面切换到移动端可以看)
- 原生js左右滑动
- js手机左右滑动
- 导航左右移动.html
- [Android] 反编译的一般实现
- Minimum Number of Arrows to Burst Balloons
- Word2003中插入花括号以及分类表达式
- 马尔科夫随机场和马尔科夫链
- HTTP协议基础(三):HTTP状态码
- js html 轮播图 支持移动端左右滑动 pc也能用
- Java异常的深入研究与分析
- 临界区
- Git教程(二)
- ubuntu搜狗输入法崩溃
- 异步消息机制源码分析
- python中str与list互换
- No module named win32api问题解决
- CNN-卷积反卷积