├── README.md ├── index(simple).html ├── history ├── index.html └── jswiper.js └── JSwiper.Simple.js /README.md: -------------------------------------------------------------------------------- 1 | # JSwiper 2 | 3 | 欢迎直接使用simple版本 4 | 5 | 使用方法: 6 | 7 | example: 8 | 9 | 10 | new JSwiper('className') 11 | 12 | new JSwiper('.swiper1',{ 13 | afterSlide:function (index) { 14 | console.log(index) 15 | }, 16 | autoplay:3000 17 | }); 18 | 19 | new JSwiper('.swiper2',{ 20 | direction:'vertical', 21 | autoplay:true 22 | }); 23 | 24 | 25 | 26 | 27 | 目前支持配置： 28 | 29 | 1.autoplay {number/boolean} 30 | 31 | 2.direction {horizontal/vertical} 32 | 33 | 3.afterSlide {callback function} 34 | 35 | 36 | * 忽略history版本（太复杂，不好用）* 37 | 38 | 39 | -------------------------------------------------------------------------------- /index(simple).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Document 9 | 62 | 63 | 64 |
65 |
66 |
1
67 |
2
68 |
3
69 |
4
70 |
5
71 |
6
72 |
73 |
74 |
75 |
76 |
77 |
1
78 |
2
79 |
3
80 |
81 |
82 | 83 | 97 | 98 | -------------------------------------------------------------------------------- /history/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 62 | 63 | 64 |
65 | 73 |
74 |
75 |
76 | 1 77 | 2 78 | 3 79 |
80 | 81 | 82 | 102 | 103 | -------------------------------------------------------------------------------- /JSwiper.Simple.js: -------------------------------------------------------------------------------- 1 | var JSwiper = function (selector, options) { 2 | this.el = typeof selector == 'string' ? document.querySelector(selector) : selector; 3 | this.wrapper = this.el.children[0]; 4 | this.index = 0; 5 | this.count = this.wrapper.querySelectorAll('.swiper-slide').length; 6 | this.init(options || {}); 7 | }; 8 | JSwiper.prototype = { 9 | init: function (options) { 10 | this.afterSlide = options.afterSlide || function () { }; 11 | this.autoplay = options.autoplay || false; 12 | this.direction = options.direction || 'horizontal'; 13 | this.roadway = this.direction==='horizontal'?this.el.offsetWidth:this.el.offsetHeight; 14 | if(this.direction!=='horizontal'){ 15 | this.el.children[0].classList.add('swiper-vertical'); 16 | } 17 | if (this.autoplay) { 18 | this.autoPlay() 19 | } 20 | this.bindEvent(); 21 | }, 22 | bindEvent: function () { 23 | var index = this.index; 24 | var count = this.count; 25 | var el = this.el; 26 | var wrapper = this.el.children[0]; 27 | var roadway = this.roadway; 28 | var direction = this.direction; 29 | var start, move, span, end = 0; 30 | 31 | el.addEventListener('touchstart', function (e) { 32 | index = this.index; 33 | if (this.timer) clearInterval(this.timer); 34 | 35 | span = 0; 36 | wrapper.classList.remove('tst'); 37 | end = -index * this.roadway; 38 | start = direction=='horizontal'?e.touches[0].pageX:e.touches[0].pageY; 39 | }.bind(this)); 40 | el.addEventListener('touchmove', function (e) { 41 | move = direction=='horizontal'?e.touches[0].pageX:e.touches[0].pageY; 42 | 43 | span = move - start; 44 | 45 | if (index == 0 && span > 0 || index == count - 1 && span < 0) return; 46 | 47 | wrapper.style.transform = direction=='horizontal'?'translate3d(' + (end + span) + 'px,0,0)':'translate3d(0,' + (end + span) + 'px,0)' 48 | 49 | }); 50 | el.addEventListener('touchend', function () { 51 | wrapper.classList.add('tst'); 52 | 53 | if (Math.abs(span) > roadway / 3) { 54 | 55 | if (span > 0) { 56 | //去往上一帧 57 | console.log('去往上一帧') 58 | index--; 59 | if (index <= 0) index = 0 60 | } 61 | if (span < 0) { 62 | //去下一帧 63 | console.log('去往下一帧') 64 | index++; 65 | if (index >= count - 1) index = count - 1 66 | } 67 | } 68 | this.index = index; 69 | this.moveTo(index); 70 | }.bind(this)) 71 | }, 72 | moveTo: function (index) { 73 | this.wrapper.style.transform = this.direction=='horizontal'?'translate3d(' + (-index * this.roadway) + 'px,0,0)':'translate3d(0,' + (-index * this.roadway) + 'px,0)' 74 | this.afterSlide(index); 75 | }, 76 | autoPlay: function () { 77 | var index = this.index; 78 | var time = typeof this.autoplay == 'number' ? this.autoplay : 3000; 79 | var that = this; 80 | this.wrapper.classList.add('tst'); 81 | this.timer = setInterval(function () { 82 | index++; 83 | 84 | if (index >= that.count) { 85 | index = 0 86 | } 87 | that.index = index; 88 | that.moveTo(index); 89 | }, time) 90 | } 91 | }; 92 | -------------------------------------------------------------------------------- /history/jswiper.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var Jswiper = function(cls,options) { 3 | this.options = options; 4 | this.win = document.querySelector(cls); 5 | this.itemsWrap = this.win.querySelector(options.itemWrapClass||'.Jswiper-wrap'); 6 | 7 | this.item = this.itemsWrap.querySelectorAll(options.itemClass||'.Jswiper-item'); 8 | this.len = this.item.length; 9 | this.stopMove = false; 10 | 11 | this.init(); 12 | this.bindEvent(); 13 | 14 | 15 | this.callback = !!options.callback ? options.callback : function (index) { 16 | //console.log(index); 17 | }; 18 | this.beforeSwipe = options.beforeSwipe || function(e){ 19 | 20 | }; 21 | this.afterSwipe = options.afterSwipe || function(e){ 22 | 23 | }; 24 | 25 | if(options.navWrapClass){ 26 | this.setNavDots(options.navWrapClass) 27 | } 28 | }; 29 | Jswiper.prototype = { 30 | init:function(){ 31 | this.winWidth = this.win.offsetWidth; 32 | this.itemsWrap.style.position = 'absolute'; 33 | this.itemsWrap.style.width = this.winWidth*this.len+'px'; 34 | 35 | var that = this; 36 | for(var i=0; i0 && that.index== 0 || that.spanX<0 && that.index == (that.len-1)) { 123 | return; 124 | } 125 | //跟随滑动 126 | that.itemsWrap.style.transform = 'translate3d('+(that.spanX+that.histSpan)+'px,0,0)'; 127 | }else{ 128 | console.log('vertical move') 129 | } 130 | },false); 131 | this.itemsWrap.addEventListener('touchend',function(e){ 132 | if(that.stopMove) return; 133 | endTime = new Date().getTime(); 134 | 135 | timeSpan = endTime- startTime; 136 | 137 | if(timeSpan<300 && timeSpan>10 && Math.abs(that.spanX)>10 || Math.abs(that.spanX)>that.winWidth/3){ 138 | if(that.spanX>0){ 139 | that.index--; 140 | if(that.index<0){ 141 | that.index=0 142 | } 143 | that.direction = 'right'; 144 | }else{ 145 | that.index++; 146 | if(that.index>=that.len){ 147 | that.index = that.len-1; 148 | } 149 | that.direction = 'left'; 150 | } 151 | } 152 | 153 | //重置 154 | timeSpan = 0; 155 | that.spanX = 0; 156 | that.spanY = 0; 157 | //添加过渡transition类 158 | if(that.itemsWrap.className.indexOf('tst')==-1){ 159 | that.itemsWrap.className = that.itemsWrap.className+' tst'; 160 | } 161 | //移动方法 162 | that.moveTo(that.index); 163 | //记录图片的滑动位置 164 | that.histSpan = getComputedStyle(that.itemsWrap).transform.split(',')[4]*1; 165 | 166 | },false); 167 | this.itemsWrap.addEventListener(this.transitionEnd,function(){ 168 | if(that.stopMove) return; 169 | //记录图片的滑动位置 170 | that.histSpan = getComputedStyle(that.itemsWrap).transform.split(',')[4]*1; 171 | //滑动结束的回调 172 | !!that.afterSwipe && that.afterSwipe(that.index); 173 | //执行回调 174 | that.callback(that.index); 175 | //检查配置项，圆点功能 176 | !!that.options.navWrapClass && that.changeDotsActive(that.index); 177 | 178 | },false); 179 | 180 | }, 181 | moveTo:function(idx){ 182 | if(idx === undefined){ 183 | console.error('该函数入参为: '+idx+' \n moveTo函数需要传入数字类型参数.'); 184 | return; 185 | } 186 | this.itemsWrap.style.transform = 'translate3d('+(-this.winWidth*idx)+'px,0,0)'; 187 | this.index = idx; 188 | } 189 | }; --------------------------------------------------------------------------------