引用：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";
}
});
950
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
