├── .eslintrc.yml ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── README_Chinese.md ├── bower.json ├── build ├── iSlider.animate.js ├── iSlider.animate.min.js ├── iSlider.css ├── iSlider.js ├── iSlider.min.css ├── iSlider.min.js ├── iSlider.plugin.BIZone.js ├── iSlider.plugin.BIZone.min.js ├── iSlider.plugin.button.js ├── iSlider.plugin.button.min.js ├── iSlider.plugin.dot.js ├── iSlider.plugin.dot.min.js ├── iSlider.plugin.zoompic.js ├── iSlider.plugin.zoompic.min.js └── index.bundle.js ├── change_log.md ├── demo ├── 2.X_default.html ├── 2.X_more-3d.html ├── 2.X_more-animation.html ├── 2.X_more-autoplay.html ├── 2.X_more-loop.html ├── 2.X_more-vertical.html ├── 2.X_with-plugin-zoom.html ├── 2.X_with-plugins-dot-button.html ├── 2.X_with-plugins-others.html ├── add_dynamic_data.html ├── animation.html ├── debug.html ├── dom_default.html ├── dom_slide_with_btn.html ├── dom_vertical_slide.html ├── dom_with_navigator.html ├── image.html ├── imgs │ ├── mob.png │ └── pic.jpg ├── index.html ├── index_chinese.html ├── intro.html ├── music_card.html ├── public │ ├── css │ │ ├── font-awesome.min.css │ │ ├── iSlider.css │ │ ├── index.css │ │ └── index_old.css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ └── js │ │ ├── iSlider.animate.js │ │ ├── iSlider.animate.min.js │ │ ├── iSlider.js │ │ ├── iSlider.min.js │ │ ├── iSlider.plugin.BIZone.js │ │ ├── iSlider.plugin.BIZone.min.js │ │ ├── iSlider.plugin.button.js │ │ ├── iSlider.plugin.button.min.js │ │ ├── iSlider.plugin.dot.js │ │ ├── iSlider.plugin.dot.min.js │ │ ├── iSlider.plugin.zoompic.js │ │ ├── iSlider.plugin.zoompic.min.js │ │ ├── index.js │ │ ├── index_old.js │ │ ├── logo.js │ │ └── queue.js ├── switch-animation.html └── swop.html ├── gulp ├── config.js └── tasks │ ├── build.js │ ├── clean.js │ ├── css.js │ ├── default.js │ ├── externals.js │ ├── iSlider.js │ ├── js.js │ ├── plugins.js │ ├── up-version.js │ ├── watch.js │ └── webpack.js ├── gulpfile.js ├── index.html ├── karma.conf.js ├── package-lock.json ├── package.json ├── src ├── index.html ├── index.js ├── js │ ├── ext │ │ └── animate.js │ ├── iSlider.js │ └── plugins │ │ ├── BIZone.js │ │ ├── button.js │ │ ├── dot.js │ │ └── zoompic.js └── style │ └── iSlider.css ├── test └── iSlider.test.js └── thumbnails ├── iSlider-logo.png ├── qrcode-home.png └── qrcode.png /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | rules: 2 | indent: 3 | - 0 4 | - 4 5 | quotes: 6 | - 2 7 | - single 8 | linebreak-style: 9 | - 2 10 | - unix 11 | semi: 12 | - 2 13 | - always 14 | no-fallthrough: 15 | - 0 16 | env: 17 | browser: true 18 | extends: 'eslint:recommended' 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by .ignore support plugin (hsz.mobi) 3 | ### JetBrains template 4 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio 5 | 6 | *.iml 7 | 8 | ## Directory-based project format: 9 | .idea/ 10 | # if you remove the above rule, at least ignore the following: 11 | 12 | # User-specific stuff: 13 | # .idea/workspace.xml 14 | # .idea/tasks.xml 15 | # .idea/dictionaries 16 | 17 | # Sensitive or high-churn files: 18 | # .idea/dataSources.ids 19 | # .idea/dataSources.xml 20 | # .idea/sqlDataSources.xml 21 | # .idea/dynamic.xml 22 | # .idea/uiDesigner.xml 23 | 24 | # Gradle: 25 | # .idea/gradle.xml 26 | # .idea/libraries 27 | 28 | # Mongo Explorer plugin: 29 | # .idea/mongoSettings.xml 30 | 31 | ## File-based project format: 32 | *.ipr 33 | *.iws 34 | 35 | ## Plugin-specific files: 36 | 37 | # IntelliJ 38 | /out/ 39 | 40 | # mpeltonen/sbt-idea plugin 41 | .idea_modules/ 42 | 43 | # JIRA plugin 44 | atlassian-ide-plugin.xml 45 | 46 | # Crashlytics plugin (for Android Studio and IntelliJ) 47 | com_crashlytics_export_strings.xml 48 | crashlytics.properties 49 | crashlytics-build.properties 50 | ### Eclipse template 51 | *.pydevproject 52 | .metadata 53 | .gradle 54 | bin/ 55 | tmp/ 56 | *.tmp 57 | *.bak 58 | *.swp 59 | *~.nib 60 | local.properties 61 | .settings/ 62 | .loadpath 63 | 64 | # Eclipse Core 65 | .project 66 | 67 | # External tool builders 68 | .externalToolBuilders/ 69 | 70 | # Locally stored "Eclipse launch configurations" 71 | *.launch 72 | 73 | # CDT-specific 74 | .cproject 75 | 76 | # JDT-specific (Eclipse Java Development Tools) 77 | .classpath 78 | 79 | # Java annotation processor (APT) 80 | .factorypath 81 | 82 | # PDT-specific 83 | .buildpath 84 | 85 | # sbteclipse plugin 86 | .target 87 | 88 | # TeXlipse plugin 89 | .texlipse 90 | ### Node template 91 | # Logs 92 | logs 93 | *.log 94 | npm-debug.log* 95 | 96 | # Runtime data 97 | pids 98 | *.pid 99 | *.seed 100 | 101 | # Directory for instrumented libs generated by jscoverage/JSCover 102 | lib-cov 103 | 104 | # Coverage directory used by tools like istanbul 105 | coverage 106 | 107 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 108 | .grunt 109 | 110 | # node-waf configuration 111 | .lock-wscript 112 | 113 | # Compiled binary addons (http://nodejs.org/api/addons.html) 114 | build/Release 115 | 116 | # Dependency directory 117 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 118 | node_modules 119 | 120 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /.gitignore 2 | /thumbnails 3 | /bower.json 4 | /gulpfile.js 5 | /index.html 6 | /karma.conf.js 7 | /test 8 | 9 | # Created by .ignore support plugin (hsz.mobi) 10 | ### SublimeText template 11 | # cache files for sublime text 12 | *.tmlanguage.cache 13 | *.tmPreferences.cache 14 | *.stTheme.cache 15 | 16 | # workspace files are user-specific 17 | *.sublime-workspace 18 | 19 | # project files should be checked into the repository, unless a significant 20 | # proportion of contributors will probably not be using SublimeText 21 | # *.sublime-project 22 | 23 | # sftp configuration file 24 | sftp-config.json 25 | ### JetBrains template 26 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio 27 | 28 | *.iml 29 | 30 | ## Directory-based project format: 31 | .idea/ 32 | # if you remove the above rule, at least ignore the following: 33 | 34 | # User-specific stuff: 35 | # .idea/workspace.xml 36 | # .idea/tasks.xml 37 | # .idea/dictionaries 38 | 39 | # Sensitive or high-churn files: 40 | # .idea/dataSources.ids 41 | # .idea/dataSources.xml 42 | # .idea/sqlDataSources.xml 43 | # .idea/dynamic.xml 44 | # .idea/uiDesigner.xml 45 | 46 | # Gradle: 47 | # .idea/gradle.xml 48 | # .idea/libraries 49 | 50 | # Mongo Explorer plugin: 51 | # .idea/mongoSettings.xml 52 | 53 | ## File-based project format: 54 | *.ipr 55 | *.iws 56 | 57 | ## Plugin-specific files: 58 | 59 | # IntelliJ 60 | /out/ 61 | 62 | # mpeltonen/sbt-idea plugin 63 | .idea_modules/ 64 | 65 | # JIRA plugin 66 | atlassian-ide-plugin.xml 67 | 68 | # Crashlytics plugin (for Android Studio and IntelliJ) 69 | com_crashlytics_export_strings.xml 70 | crashlytics.properties 71 | crashlytics-build.properties 72 | ### Node template 73 | # Logs 74 | logs 75 | *.log 76 | npm-debug.log* 77 | 78 | # Runtime data 79 | pids 80 | *.pid 81 | *.seed 82 | 83 | # Directory for instrumented libs generated by jscoverage/JSCover 84 | lib-cov 85 | 86 | # Coverage directory used by tools like istanbul 87 | coverage 88 | 89 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 90 | .grunt 91 | 92 | # node-waf configuration 93 | .lock-wscript 94 | 95 | # Compiled binary addons (http://nodejs.org/api/addons.html) 96 | build/Release 97 | 98 | # Dependency directory 99 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 100 | node_modules 101 | ### Eclipse template 102 | *.pydevproject 103 | .metadata 104 | .gradle 105 | bin/ 106 | tmp/ 107 | *.tmp 108 | *.bak 109 | *.swp 110 | *~.nib 111 | local.properties 112 | .settings/ 113 | .loadpath 114 | 115 | # Eclipse Core 116 | .project 117 | 118 | # External tool builders 119 | .externalToolBuilders/ 120 | 121 | # Locally stored "Eclipse launch configurations" 122 | *.launch 123 | 124 | # CDT-specific 125 | .cproject 126 | 127 | # JDT-specific (Eclipse Java Development Tools) 128 | .classpath 129 | 130 | # Java annotation processor (APT) 131 | .factorypath 132 | 133 | # PDT-specific 134 | .buildpath 135 | 136 | # sbteclipse plugin 137 | .target 138 | 139 | # TeXlipse plugin 140 | .texlipse 141 | 142 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 BE-FE 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iSlider", 3 | "homepage": "https://github.com/BE-FE/iSlider", 4 | "description": "Smooth and high-performance slide web framework. Suitable for PC, Mobile WebApp, HTML5 App, Hybrid App", 5 | "main": [ 6 | "build/iSlider.min.js", 7 | "build/iSlider.min.css" 8 | ], 9 | "keywords": [ 10 | "smooth", 11 | "hybrid", 12 | "mobile", 13 | "performance", 14 | "slide", 15 | "slider", 16 | "animate", 17 | "effect", 18 | "mobile", 19 | "iSlider.js", 20 | "javascript", 21 | "lightweight", 22 | "plug-in", 23 | "easy to expand" 24 | ], 25 | "authors": [ 26 | "qbaty", 27 | "xieyu33333", 28 | "shinate" 29 | ], 30 | "license": "MIT", 31 | "ignore": [ 32 | "**/.*", 33 | ".idea", 34 | "*.iml", 35 | "node_modules", 36 | "demo", 37 | "test", 38 | "thumbnails", 39 | "karma.conf.js", 40 | "gulpfile.js", 41 | "index.html", 42 | "gulp" 43 | ], 44 | "version": "2.2.4" 45 | } 46 | -------------------------------------------------------------------------------- /build/iSlider.animate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * More animations 3 | * @file animate.js 4 | * @author BE-FE Team 5 | * xieyu33333 xieyu33333@gmail.com 6 | * shinate shine.wangrs@gmail.com 7 | */ 8 | 9 | (function (global, factory) { 10 | /* CommonJS */ 11 | if (typeof require === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) 12 | factory(require('./iSlider')); 13 | /* AMD */ 14 | else if (typeof define === 'function' && define['amd']) 15 | define(['./iSlider'], function (iSlider) { 16 | factory(iSlider); 17 | }); 18 | /* Global */ 19 | else 20 | factory(global['iSlider']); 21 | 22 | })(window ? window : this, function (iSlider) { 23 | 24 | 'use strict'; 25 | 26 | iSlider && iSlider.extend(iSlider._animateFuncs, { 27 | // rotate 28 | rotate: (function () { 29 | function rotate(dom, axis, scale, i, offset, direct) { 30 | var rotateDirect = (axis === 'X') ? 'Y' : 'X'; 31 | 32 | if (this.isVertical) { 33 | offset = -offset; 34 | if (Math.abs(direct) > 1) { 35 | direct = -direct; 36 | } 37 | } 38 | 39 | var outer = dom.parentElement; 40 | iSlider.setStyle(outer, 'perspective', scale * 4); 41 | 42 | dom.style.visibility = 'visible'; 43 | if (direct > 0 && i === 2) { 44 | dom.style.visibility = 'hidden'; 45 | } 46 | if (direct < 0 && i === 0) { 47 | dom.style.visibility = 'hidden'; 48 | } 49 | dom.style.zIndex = i === 1 ? 1 : 0; 50 | 51 | dom.style.cssText += iSlider.styleProp('backface-visibility') + ':hidden;' + iSlider.styleProp('transform-style') + ':preserve-3d;' + 'position:absolute;'; 52 | 53 | // TODO: overflow... I dont understand why there are many differences between ios and desktop. Maybe they have different interpretations of Perspective 54 | iSlider.setStyle(dom, 'transform', 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.889 * scale / 2) + 'px) scale(0.889)'); 55 | } 56 | 57 | rotate.effect = iSlider.styleProp('transform'); 58 | rotate.reverse = true; 59 | return rotate; 60 | })(), 61 | // flip 62 | flip: (function () { 63 | function flip(dom, axis, scale, i, offset, direct) { 64 | if (this.isVertical) { 65 | offset = -offset; 66 | } 67 | 68 | var outer = dom.parentElement; 69 | iSlider.setStyle(outer, 'perspective', scale * 4); 70 | 71 | dom.style.visibility = 'visible'; 72 | if (direct > 0 && i === 2) { 73 | dom.style.visibility = 'hidden'; 74 | } 75 | if (direct < 0 && i === 0) { 76 | dom.style.visibility = 'hidden'; 77 | } 78 | 79 | dom.style.cssText += 'position:absolute;' + iSlider.styleProp('backface-visibility') + ':hidden'; 80 | iSlider.setStyle(dom, 'transform', 'translateZ(' + (scale / 2) + 'px) rotate' + ((axis === 'X') ? 'Y' : 'X') + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)'); 81 | } 82 | 83 | flip.effect = iSlider.styleProp('transform'); 84 | flip.reverse = true; 85 | return flip; 86 | })(), 87 | depth: (function () { 88 | 89 | function depth(dom, axis, scale, i, offset, direct) { 90 | var zoomScale = (4 - Math.abs(i - 1)) * 0.18; 91 | var outer = dom.parentElement; 92 | iSlider.setStyle(outer, 'perspective', scale * 4); 93 | dom.style.zIndex = i === 1 ? 1 : 0; 94 | iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)'); 95 | } 96 | 97 | depth.effect = iSlider.styleProp('transform'); 98 | return depth; 99 | })(), 100 | flow: (function () { 101 | function flow(dom, axis, scale, i, offset, direct) { 102 | var absoluteOffset = Math.abs(offset); 103 | var rotateDirect = (axis === 'X') ? 'Y' : 'X'; 104 | var directAmend = (axis === 'X') ? 1 : -1; 105 | var offsetRatio = Math.abs(offset / scale); 106 | var outer = dom.parentElement; 107 | 108 | iSlider.setStyle(outer, 'perspective', scale * 4); 109 | 110 | if (i === 1) { 111 | dom.style.zIndex = scale - absoluteOffset; 112 | } 113 | else { 114 | dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset : (i - 1) * absoluteOffset; 115 | } 116 | 117 | iSlider.setStyle(dom, 'transform', 'scale(0.7, 0.7) translateZ(' + (offsetRatio * 150 - 150) * Math.abs(i - 1) + 'px)' + 'translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)' + 'rotate' + rotateDirect + '(' + directAmend * (30 - offsetRatio * 30) * (1 - i) + 'deg)'); 118 | } 119 | 120 | flow.effect = iSlider.styleProp('transform'); 121 | return flow; 122 | })(), 123 | card: (function () { 124 | function card(dom, axis, scale, i, offset, direct) { 125 | var absoluteOffset = Math.abs(offset); 126 | var zoomScale = 1; 127 | var z = 1; 128 | 129 | if (absoluteOffset > 0) { 130 | if (i === 1) { 131 | zoomScale = 1 - 0.2 * Math.abs(i - 1) - Math.abs(0.2 * offset / scale).toFixed(6); 132 | z = 0; 133 | } 134 | } else { 135 | if (i !== 1) { 136 | if ((direct > 0 && i === 0) || (direct < 0 && i === 2)) { 137 | zoomScale = 1 - 0.2 * Math.abs(i - 1); 138 | } 139 | z = 0; 140 | } 141 | } 142 | dom.style.zIndex = z; 143 | iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + ((1 + Math.abs(i - 1) * 0.2) * offset + scale * (i - 1)) + 'px)'); 144 | } 145 | 146 | card.effect = iSlider.styleProp('transform'); 147 | return card; 148 | })(), 149 | fade: (function () { 150 | function fade(dom, axis, scale, i, offset, direct) { 151 | dom.style.zIndex = i === 1 ? 1 : 0; 152 | offset = Math.abs(offset); 153 | if (i === 1) { 154 | dom.style.opacity = 1 - (offset / scale); 155 | } else { 156 | dom.style.opacity = offset / scale; 157 | } 158 | } 159 | 160 | fade.effect = 'opacity'; 161 | return fade; 162 | })(), 163 | zoomout: (function () { 164 | var lsn; 165 | 166 | function zoomout(dom, axis, scale, i, offset) { 167 | var z, o, s; 168 | 169 | var oa = offset / scale; 170 | switch (i) { 171 | case 0: 172 | lsn && window.clearTimeout(lsn); 173 | o = oa < 1 ? oa : 1; 174 | s = 2 - (0.5 * oa); 175 | z = 2; 176 | var at = parseInt(window.getComputedStyle(dom)[iSlider.styleProp('transitionDuration', 1)]) * 1000; 177 | if (at > 0) { 178 | lsn = window.setTimeout(function () { 179 | dom.style.zIndex = 0; 180 | }, at); 181 | } 182 | break; 183 | case 1: 184 | o = 1 - oa; 185 | s = 1 - (0.5 * oa); 186 | z = 1; 187 | break; 188 | case 2: 189 | o = oa > 0 ? oa : 0; 190 | s = 0.5 - (0.5 * oa); 191 | z = 0; 192 | break; 193 | } 194 | dom.style.cssText += 'z-index:' + z + ';opacity:' + o + ';' + iSlider.styleProp('transform') + ':scale(' + s + ');'; 195 | } 196 | 197 | zoomout.reverse = true; 198 | return zoomout; 199 | })() 200 | }); 201 | }); -------------------------------------------------------------------------------- /build/iSlider.animate.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("./iSlider")):"function"==typeof define&&define.amd?define(["./iSlider"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.extend(e._animateFuncs,{rotate:function(){function t(t,s,i,n,r,a){var o="X"===s?"Y":"X";this.isVertical&&(r=-r,Math.abs(a)>1&&(a=-a));var l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),a<0&&0===n&&(t.style.visibility="hidden"),t.style.zIndex=1===n?1:0,t.style.cssText+=e.styleProp("backface-visibility")+":hidden;"+e.styleProp("transform-style")+":preserve-3d;position:absolute;",e.setStyle(t,"transform","rotate"+o+"("+90*(r/i+n-1)+"deg) translateZ("+.889*i/2+"px) scale(0.889)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),flip:function(){function t(t,s,i,n,r,a){this.isVertical&&(r=-r);var o=t.parentElement;e.setStyle(o,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),a<0&&0===n&&(t.style.visibility="hidden"),t.style.cssText+="position:absolute;"+e.styleProp("backface-visibility")+":hidden",e.setStyle(t,"transform","translateZ("+i/2+"px) rotate"+("X"===s?"Y":"X")+"("+180*(r/i+n-1)+"deg) scale(0.875)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),depth:function(){function t(t,s,i,n,r,a){var o=.18*(4-Math.abs(n-1)),l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.zIndex=1===n?1:0,e.setStyle(t,"transform","scale("+o+") translateZ(0) translate"+s+"("+(r+1.3*i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),flow:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l="X"===s?"Y":"X",c="X"===s?1:-1,f=Math.abs(r/i),y=t.parentElement;e.setStyle(y,"perspective",4*i),1===n?t.style.zIndex=i-o:t.style.zIndex=r>0?(1-n)*o:(n-1)*o,e.setStyle(t,"transform","scale(0.7, 0.7) translateZ("+(150*f-150)*Math.abs(n-1)+"px)translate"+s+"("+(r+i*(n-1))+"px)rotate"+l+"("+c*(30-30*f)*(1-n)+"deg)")}return t.effect=e.styleProp("transform"),t}(),card:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l=1,c=1;o>0?1===n&&(l=1-.2*Math.abs(n-1)-Math.abs(.2*r/i).toFixed(6),c=0):1!==n&&((a>0&&0===n||a<0&&2===n)&&(l=1-.2*Math.abs(n-1)),c=0),t.style.zIndex=c,e.setStyle(t,"transform","scale("+l+") translateZ(0) translate"+s+"("+((1+.2*Math.abs(n-1))*r+i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),fade:function(){function e(e,t,s,i,n,r){e.style.zIndex=1===i?1:0,n=Math.abs(n),1===i?e.style.opacity=1-n/s:e.style.opacity=n/s}return e.effect="opacity",e}(),zoomout:function(){function t(t,i,n,r,a){var o,l,c,f=a/n;switch(r){case 0:s&&window.clearTimeout(s),l=f<1?f:1,c=2-.5*f,o=2;var y=1e3*parseInt(window.getComputedStyle(t)[e.styleProp("transitionDuration",1)]);y>0&&(s=window.setTimeout(function(){t.style.zIndex=0},y));break;case 1:l=1-f,c=1-.5*f,o=1;break;case 2:l=f>0?f:0,c=.5-.5*f,o=0}t.style.cssText+="z-index:"+o+";opacity:"+l+";"+e.styleProp("transform")+":scale("+c+");"}var s;return t.reverse=!0,t}()})}); -------------------------------------------------------------------------------- /build/iSlider.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file iSlider.css 3 | */ 4 | 5 | /** 6 | * =========================== 7 | * iSlider 8 | * =========================== 9 | */ 10 | .islider-outer { 11 | display: block; 12 | position: relative; 13 | list-style: none; 14 | margin: 0; 15 | padding: 0; 16 | height: 100%; 17 | width: 100%; 18 | overflow: hidden; 19 | } 20 | 21 | .islider-outer > li { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | margin: 0; 26 | padding: 0; 27 | width: 100%; 28 | height: 100%; 29 | list-style: none; 30 | overflow: hidden; 31 | display: -moz-box; 32 | display: -webkit-box; 33 | display: box; 34 | -moz-box-pack: center; 35 | -webkit-box-pack: center; 36 | box-pack: center; 37 | -moz-box-align: center; 38 | -webkit-box-align: center; 39 | box-align: center; 40 | } 41 | 42 | .islider-img > img { 43 | max-width: 100%; 44 | max-height: 100%; 45 | } 46 | 47 | .islider-sliding { 48 | z-index: 0; 49 | } 50 | 51 | .islider-sliding-focus { 52 | z-index: 1; 53 | } 54 | 55 | /** 56 | * =========================== 57 | * iSlider.plugin.button 58 | * =========================== 59 | */ 60 | .islider-btn-outer { 61 | position: absolute; 62 | width: 3em; 63 | height: 3em; 64 | cursor: pointer; 65 | top: 0; 66 | bottom: 0; 67 | margin: auto 0; 68 | display: block; 69 | background-color: #777777; 70 | } 71 | 72 | .islider-btn-outer.left { 73 | left: 5%; 74 | } 75 | 76 | .islider-btn-outer.right { 77 | right: 5%; 78 | } 79 | 80 | .islider-btn-inner { 81 | position: absolute; 82 | width: 50%; 83 | height: 50%; 84 | border-top: 2px solid #ffffff; 85 | border-left: 2px solid #ffffff; 86 | margin: auto; 87 | top: 0; 88 | bottom: 0; 89 | left: 0; 90 | right: 0; 91 | } 92 | 93 | .islider-btn-outer.left > .islider-btn-inner { 94 | -webkit-transform: rotate(-45deg); 95 | -moz-transform: rotate(-45deg); 96 | -ms-transform: rotate(-45deg); 97 | -o-transform: rotate(-45deg); 98 | transform: rotate(-45deg); 99 | } 100 | 101 | .islider-btn-outer.right > .islider-btn-inner { 102 | -webkit-transform: rotate(135deg); 103 | -moz-transform: rotate(135deg); 104 | -ms-transform: rotate(135deg); 105 | -o-transform: rotate(135deg); 106 | transform: rotate(135deg); 107 | } 108 | 109 | /** 110 | * =========================== 111 | * iSlider.plugin.dot 112 | * =========================== 113 | */ 114 | .islider-dot-wrap { 115 | width: 80%; 116 | height: 10%; 117 | margin: 0 auto; 118 | position: absolute; 119 | padding: 0; 120 | left: 0; 121 | right: 0; 122 | bottom: 0; 123 | z-index: 10000; 124 | text-align: center; 125 | } 126 | 127 | .islider-dot { 128 | position: relative; 129 | display: inline-block; 130 | width: 0.8em; 131 | height: 0.8em; 132 | border-radius: 50%; 133 | border: 1px solid #ffffff; 134 | list-style: none; 135 | margin: 5px; 136 | } 137 | 138 | .islider-dot.active { 139 | background-color: #ffffff; 140 | } -------------------------------------------------------------------------------- /build/iSlider.min.css: -------------------------------------------------------------------------------- 1 | .islider-outer,.islider-outer>li{margin:0;width:100%;height:100%;overflow:hidden;padding:0;list-style:none}.islider-outer{display:block;position:relative}.islider-outer>li{position:absolute;top:0;left:0;display:-moz-box;display:-webkit-box;display:box;-moz-box-pack:center;-webkit-box-pack:center;box-pack:center;-moz-box-align:center;-webkit-box-align:center;box-align:center}.islider-img>img{max-width:100%;max-height:100%}.islider-sliding{z-index:0}.islider-sliding-focus{z-index:1}.islider-btn-outer{position:absolute;width:3em;height:3em;cursor:pointer;top:0;bottom:0;margin:auto 0;display:block;background-color:#777}.islider-btn-outer.left{left:5%}.islider-btn-outer.right{right:5%}.islider-btn-inner,.islider-dot-wrap{position:absolute;left:0;right:0;bottom:0}.islider-btn-inner{width:50%;height:50%;border-top:2px solid #fff;border-left:2px solid #fff;margin:auto;top:0}.islider-btn-outer.left>.islider-btn-inner{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.islider-btn-outer.right>.islider-btn-inner{-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)}.islider-dot-wrap{width:80%;height:10%;margin:0 auto;padding:0;z-index:10000;text-align:center}.islider-dot{position:relative;display:inline-block;width:.8em;height:.8em;border-radius:50%;border:1px solid #fff;list-style:none;margin:5px}.islider-dot.active{background-color:#fff} -------------------------------------------------------------------------------- /build/iSlider.plugin.BIZone.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Boundary Identification Zone 3 | * 4 | * @file BIZone.js 5 | * @author BE-FE Team 6 | * shinate shine.wangrs@gmail.com 7 | */ 8 | 9 | (function (global, factory) { 10 | /* CommonJS */ 11 | if (typeof require === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) 12 | factory(require('islider.js')); 13 | /* AMD */ 14 | else if (typeof define === 'function' && define['amd']) 15 | define(['islider.js'], function (iSlider) { 16 | factory(iSlider); 17 | }); 18 | /* Global */ 19 | else 20 | factory(global['iSlider']); 21 | 22 | })(window ? window : this, function (iSlider) { 23 | 24 | 'use strict'; 25 | 26 | iSlider && iSlider.regPlugin('BIZone', function (opts) { 27 | 28 | var HANDLE = this; 29 | var zoneSize = parseZone(opts.size || 0); 30 | var device = this.deviceEvents; 31 | var outer = HANDLE.outer; 32 | 33 | var range = initRange(); 34 | 35 | function parseZone(sizes) { 36 | if (typeof sizes === 'number') { 37 | if (sizes < 0) { 38 | sizes = 0; 39 | } 40 | return [sizes, sizes, sizes, sizes]; 41 | } else if (sizes instanceof Array) { 42 | switch (sizes.length) { 43 | case 4: 44 | return sizes; 45 | case 3: 46 | return [sizes[0], sizes[1], sizes[2], sizes[1]]; 47 | case 2: 48 | return [sizes[0], sizes[1], sizes[0], sizes[1]]; 49 | case 1: 50 | return [sizes[0], sizes[0], sizes[0], sizes[0]]; 51 | } 52 | } 53 | 54 | return [0, 0, 0, 0]; 55 | } 56 | 57 | function initRange() { 58 | var docEl = outer.ownerDocument.documentElement; 59 | var box = {top: 0, left: 0}; 60 | if (typeof outer.getBoundingClientRect !== 'undefined') { 61 | box = outer.getBoundingClientRect(); 62 | } 63 | 64 | var top = box.top + ( window.pageYOffset || docEl.scrollTop ) - ( docEl.clientTop || 0 ); 65 | var left = box.left + ( window.pageXOffset || docEl.scrollLeft ) - ( docEl.clientLeft || 0 ); 66 | 67 | return [ 68 | top, // top 69 | left + outer.offsetWidth, // right 70 | top + outer.offsetHeight, // bottom 71 | left // left 72 | ]; 73 | } 74 | 75 | if (zoneSize.filter(function (i) { 76 | return i > 0; 77 | }).length > 0) { 78 | HANDLE.on('slide', function (evt) { 79 | var finger = device.hasTouch ? evt.targetTouches[0] : evt; 80 | var pos = [finger.pageY, finger.pageX, finger.pageY, finger.pageX]; 81 | for (var i = 0; i < 4; i++) { 82 | if (Math.abs(pos[i] - range[i]) < zoneSize[i]) { 83 | this.endHandler(new Event(device.endEvt)); 84 | break; 85 | } 86 | } 87 | }); 88 | } 89 | }); 90 | }); -------------------------------------------------------------------------------- /build/iSlider.plugin.BIZone.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("islider.js")):"function"==typeof define&&define.amd?define(["islider.js"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.regPlugin("BIZone",function(e){function t(e){if("number"==typeof e)return e<0&&(e=0),[e,e,e,e];if(e instanceof Array)switch(e.length){case 4:return e;case 3:return[e[0],e[1],e[2],e[1]];case 2:return[e[0],e[1],e[0],e[1]];case 1:return[e[0],e[0],e[0],e[0]]}return[0,0,0,0]}function n(){var e=f.ownerDocument.documentElement,t={top:0,left:0};"undefined"!=typeof f.getBoundingClientRect&&(t=f.getBoundingClientRect());var n=t.top+(window.pageYOffset||e.scrollTop)-(e.clientTop||0),i=t.left+(window.pageXOffset||e.scrollLeft)-(e.clientLeft||0);return[n,i+f.offsetWidth,n+f.offsetHeight,i]}var i=this,o=t(e.size||0),r=this.deviceEvents,f=i.outer,u=n();o.filter(function(e){return e>0}).length>0&&i.on("slide",function(e){for(var t=r.hasTouch?e.targetTouches[0]:e,n=[t.pageY,t.pageX,t.pageY,t.pageX],i=0;i<4;i++)if(Math.abs(n[i]-u[i])1&&(r=l[1]-0,n=l[2]-0),"none"===s)return a;var f,c=s.match(/^matrix3d\((.+)\)$/),p=s.match(/^matrix\((.+)\)$/);return c?(f=c[1].split(", "),a={translateX:f[12]-0,translateY:f[13]-0,translateZ:f[14]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[5]-0,scaleZ:f[10]-0}):p&&(f=p[1].split(", "),a={translateX:f[4]-0,translateY:f[5]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[3]-0}),a}function l(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}function f(t){T=1,x=t&&t.zoomFactor||2}function c(t){D.call(this,t);var e=this.els[1].querySelector("img:first-child"),a=this.deviceEvents;if(a.hasTouch&&null!==e){O=!0;var r=i(e);b=s(t.targetTouches),w=r.translateX-0,k=r.translateY-0,T=r.scaleX,Y=e;var o=v(e);if(2==t.targetTouches.length){H=null;var f=t.touches,c=l({x:f[0].pageX,y:f[0].pageY},{x:f[1].pageX,y:f[1].pageY});e.style.webkitTransformOrigin=n(c.x-o.left,c.y-o.top)}else if(1===t.targetTouches.length){var p=(new Date).getTime();S=0,p-H<300&&(t.preventDefault(),S=3),H=p}}}function p(t){if(O){var e=0,a=Y,r=this.deviceEvents;if(r.hasTouch&&(2===t.targetTouches.length?(a.style.webkitTransitionDuration="0",t.preventDefault(),h(t),e=2):1===t.targetTouches.length&&T>1&&(a.style.webkitTransitionDuration="0",t.preventDefault(),g.call(this,t),e=1),S=e,e>0))return}j.call(this,t)}function u(t){var e=e||2,r=Y,s=v(r);T=1==T?e:1,r.style.webkitTransform=a(0,0,0,T),1!=T&&(r.style.webkitTransformOrigin=n(t.touches[0].pageX-s.left,t.touches[0].pageY-s.top))}function h(t){var e=s(t.targetTouches),r=o(b,e),n=Y;r=T*r0)return}W.call(this,t)}function g(t){var e=Y,r=this.deviceEvents,n={X:r.hasTouch?t.targetTouches[0].pageX-this.startX:t.pageX-this.startX,Y:r.hasTouch?t.targetTouches[0].pageY-this.startY:t.pageY-this.startY},s={x:w+n.X-0,y:k+n.Y-0};e.style.webkitTransform=a(s.x,s.y,0,T)}function v(t){var e={left:0,top:0};do e.top+=t.offsetTop||0,e.left+=t.offsetLeft||0,t=t.offsetParent;while(t);return e}function m(t,e,a){var r,n,s=v(t);C={start:{left:s.left,top:s.top},end:{left:s.left+t.clientWidth,top:s.top+t.clientHeight}};var o=1==a?"left":"top";return r=C.start[o],n=C.end[o],e>=r&&e<=n}function X(t,e){var a=0,r=m(t,e.start.left,1),n=m(t,e.end.left,1),s=m(t,e.start.top,0),o=m(t,e.end.top,0);return r!=n&&s!=o?a=r&&o?1:r&&s?2:n&&o?3:4:r==n?!s&&o?a=5:!o&&s&&(a=6):s==o?!r&&n?a=7:r&&!n&&(a=8):s==o==r==n&&(a=9),a}function y(){if(1!=T){var t,e,r,n,s,o,l,f,c,p,u=Y;switch(r=i(u),c=u.parentNode,n=u.clientWidth*r.scaleX,s=u.clientHeight*r.scaleX,o=v(u),l={left:(1-r.scaleX)*r.offsetX+o.left+r.translateX,top:(1-r.scaleX)*r.offsetY+o.top+r.translateY},f={left:l.left+n,top:l.top+s},t=l.left,e=l.top,p=X(c,{start:l,end:f})){case 1:t=C.start.left,e=C.end.top-s;break;case 2:t=C.start.left,e=C.start.top;break;case 3:t=C.end.left-n,e=C.end.top-s;break;case 4:t=C.end.left-n,e=C.start.top;break;case 5:e=C.end.top-s;break;case 6:e=C.start.top;break;case 7:t=C.end.left-n;break;case 8:t=C.start.left}n onMoving 28 | - [Optimization][EXT]animation 29 | 30 | #### Something new 31 | - Add new method "[subjectTo](https://github.com/BE-FE/iSlider/blob/master/README.md#subjectto)" 32 | 33 | 34 | ### iSlider 2.1.2 35 | - [Optimization]orientationChange and resize distinction => resizeEvt, according to whether the mobile device. 36 | - [Optimization]Merge "leaving" event, mouseout and touchcancel. 37 | - [Optimization]When iSlider is set to autoplay, flip phone screen or resize the window at this point, autoplay can not be paused! (especially Android (#‵′)!!!) 38 | - A lot of optimization... lots and lots 39 | - Reconstruction of continuous sliding queuing mechanism, change it to the event handler maintenance. 40 | - Peeling methods 41 | - Every effort to ensure the performance, although it is only a special place in time. 42 | - Reconstruction of the resizeEvt method. 43 | 44 | ### iSlider 2.1.1 45 | - [BUG fix]Repair resize event to lose focus in Android. 46 | 47 | ### iSlider 2.1.0 48 | - [Optimization]Fully optimized animation. Animation logic decoupling from iSlider. 49 | - [New]Add an animation, zoomout. 50 | 51 | ### iSlider 2.0.14 52 | - [Optimization][Plug-in]BIZone 53 | - plugins: ['BIZone', {size: {VALUE}}] 54 | - {VALUE} default is 0, you can also pass an array [top, right, bottom, left], eg: [10, 20] or [10, 0, 0] or [1, 2, 3, 4]. Similar "margin" or "padding". 55 | 56 | ### iSlider 2.0.13 57 | - [Optimization]Review demos 58 | 59 | ### iSlider 2.0.12 60 | - [Optimization]Links on fixPage:true add preventDevault 61 | - [BUG fix]Repair plug-dot Click failure problem 62 | 63 | #### Something new 64 | - Add new option "fingerRecognitionRange" to prevent inadvertently touched 65 | 66 | #### iSlider too fat\! Weight Loss complete\! 67 | ![](http://image.tupian114.com/20140714/10390202.jpg) 68 | 69 | ### iSlider 2.0.11 70 | - [Optimization]Links to determine whether the "_blank" 71 | - [Optimization]autoplay time sequence optimization, more smoothly, not interfere with touch events 72 | - [Optimization]Slimming file/directory structure 73 | 74 | #### Something new 75 | - Add new callback functions 76 | - oninitialize, oninitialized in structural parameters 77 | - initialize, initialized on callback register 78 | - Now you can manually specify the container width and height, When a container is not actually in the page. 79 | 80 | ### iSlider 2.0.10 81 | - [Optimization]Some effects (such as default, rotate) in some browsers, there is a thin seam between the two scenes. 82 | - We try to solve, yes, it has been resolved in most cases. 83 | - However, this caused some impact on performance, so we use it as a configuration option called "fillSeam", the default value is false, it is disabled. When you need it can be enabled. 84 | - [Plug-in]button support vertically sliding case. 85 | - [Plug-in]dot support vertically sliding case. 86 | 87 | ### iSlider 2.0.9 88 | - [BUG fix]disperse ghost when rotate and flip 89 | - [Optimization]animate: remove rotate and flip cover background-color 90 | - [BUG fix]Background image rendering affect the first frame position 91 | - Some optimization 92 | 93 | ### iSlider 2.0.8 94 | 95 | - [BUG fix]Fix initPage error, thanks @ronnyKJ 96 | 97 | ### iSlider 2.0.7 98 | 99 | - [BUG fix]Remove tap event trigger. 100 | - Without tap library support, if you bind a tap event, we will help you trigger it. If there are library supports tap, such as zepto, it will trigger twice. Accordingly, this action must be removed. 101 | - If you want to use the tap, or any other custom events, which means that it is important to you, we do not need to stop it. 102 | 103 | ### iSlider 2.0.6 104 | 105 | - [Optimization]add default width:100% for ul in css file. 106 | - [BUG fix]At isOverspread mode, background image cant be displayed. background size problem. (╯‵□′)╯︵┻━┻, baidu browser... kernel tooooooo damn old! 107 | 108 | ### iSlider 2.0.5 109 | 110 | - [Optimization]Autoplay timer will start counting after animation("slideChanged", "slideRestored") 111 | - [Optimization]Add option "delay" for setting what time to start auto-play 112 | - [Optimization]Methods "on" add the third parameter to set a callback priority(Boolean equivalent value), If set to "true" then added to the top of the queue. default is "false". 113 | 114 | 115 | ### iSlider 2.0.4 116 | 117 | 2015-11-13 118 | 119 | - [BUG Fix]None fixPage mode, overflow will set to "auto" 120 | - [BUG Fix]Add "mouseout" event, on desktop browser. Sticky problem when the finger to draw boundaries during sliding. 121 | - [Optimization] Image loading sequence 122 | - [Optimization] Animation Scope 123 | - [Optimization] AnimateType mount change 124 | - [Plug-in] BIZone added 125 | 126 | ### iSlider 2.0.3 127 | 128 | 2015-11-02 129 | 130 | Fix parameter error, opts is is no longer necessary. 131 | 132 | ### iSlider 2.0.2 133 | 134 | #### bug fixes 135 | 136 | - Fix mouse buttons error on safari; 137 | - Fix timer clean in destroy; 138 | 139 | #### Something new 140 | 141 | - Create event callback management mechanism, and "unbind", "undelegate" method; 142 | - Cleanup delegate event when destruction; 143 | 144 | ### iSlider 2.0.1 145 | 146 | 2015-10-20 147 | 148 | #### bug fixes 149 | 150 | - fixPage default value 151 | 152 | #### Something new 153 | 154 | - [Plug-ins] dot support more optisons, 155 | - locate - In which the container, values: 'absolute' or 'relative' or DOM, default is 'absolute' 156 | - absolute: Same with iSlider 157 | - relative: In iSlider 158 | - Specified dom, eg: document.getElementById('xxx') 159 | 160 | 161 | ### iSlider 2.0 162 | 163 | 2015-08-29 164 | 165 | #### Optimization, bug fixes 166 | 167 | - Original plug-in decoupling: dot, button, zoompic 168 | - Script reference change, adding mode 169 | - Remove configure options 170 | - useZoom (move to plugins) 171 | - Preload will work in all modes when the frame is automatically recognized as a picture. 172 | 173 | #### Something new 174 | 175 | - Support scramble data 176 | - Now you can choose any combination, put pictures, html string, elements, and even fragment, into the data list. 177 | - Option "type" is unnecessary, when it is 'pic' will open the image globally pre-loaded, of course, you don't have to worry about the other type of list members:) 178 | 179 | - Event registration mechanism added 180 | - Use "on"/"off" methods to manage events. 181 | - Now you can register event after the initialization, and they can be deleted. 182 | 183 | - Plug-registration mechanism added. (support original/hot registration) 184 | 185 | - Support for new event types 186 | - slideChanged 187 | - slideRestore 188 | - slideRestored 189 | 190 | - Supported parameters methods 191 | 192 | Now, slideTo, slideNext, slidePrev support the second parmater ({Object}) for custom temporary 193 | - animateTime 194 | - animateType 195 | 196 | - Configurable options 197 | - plugins: enable plugin 198 | - animateTime: animation process time 199 | - animateEasing: support linear, ease, ease-in, ease-out, ease-in-out and custom cubic-bezier() 200 | 201 | - Callback parameter specification 202 | 203 | - Hold and Lock. add 4 mothods "hold", "unhold", "lock", "unlock" 204 | - hold - disable touch events, except for the native method. 205 | - unhole - release current scene, and unlock at same time 206 | - lock - lock native method calls, you can't do anything on this scene, and hold at same time 207 | - unlock - unlock native method calls 208 | 209 | priority 210 | - hold << lock(hold) 211 | - unhold(unlock) >> unlock 212 | 213 | - Jumpy reader scene more smoother 214 | 215 | ### iSlider 1.1.1 216 | - Add image preload, load one more image when slideChange and renderHTML. 217 | - Add scroll support, you can use origin scroll or iscroll in iSlider 218 | - Add tap event, avoid click 300ms delay 219 | - Add simple event bind, you can easy bind events without jQuery 220 | 221 | ### iSlider 1.1.0 222 | - increased animation type , including(default, rotate, flip, depth, flow) 223 | - fixed interval looping bug (when window blur) 224 | - added overspread mode 225 | - added desktop support 226 | - optimized the code style 227 | 228 | ### iSlider 1.0 beta 229 | - fixed orientationchange event 230 | - add those event onslide & onslidechange & onslidestart & onslideend 231 | - add parameter like isVerticle & isLooping & isAutoplay 232 | 233 | ### iSlider 0.9 beta 234 | - Keep li elements in 3 235 | - Add damping effect when meeting the edge of the list 236 | - handle onorientationchange Event 237 | - Add layer slider not just pic slider 238 | -------------------------------------------------------------------------------- /demo/2.X_default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | Default 2.0 8 | 9 | 50 | 51 | 52 | 53 |
54 | 57 | 58 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /demo/2.X_more-3d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | iSlider more animation 8 | 9 | 50 | 51 | 52 | 53 |
54 | 57 | 58 | 59 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /demo/2.X_more-animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | iSlider more animation 8 | 9 | 50 | 51 | 52 | 53 |
54 | 57 | 58 | 59 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /demo/2.X_more-autoplay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | iSlider more animation 8 | 9 | 51 | 52 | 53 | 54 | 57 |
58 | 61 | 62 | 63 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /demo/2.X_more-loop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | iSlider loop 8 | 9 | 50 | 51 | 52 | 53 |
54 | 57 | 58 | 59 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /demo/2.X_more-vertical.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | iSlider more animation 8 | 9 | 50 | 51 | 52 | 53 |
54 | 57 | 58 | 59 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /demo/2.X_with-plugin-zoom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | iSlider with plugin zoompic 8 | 9 | 50 | 51 | 52 | 53 |
54 | 55 | 56 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /demo/2.X_with-plugins-dot-button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | iSlider with plugins dot and button 8 | 9 | 69 | 70 | 71 | 72 |
73 | 76 | 77 | 78 | 79 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /demo/2.X_with-plugins-others.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | iSlider with plugins others 8 | 9 | 69 | 70 | 71 | 72 |
73 | 76 | 77 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /demo/add_dynamic_data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 30 | 31 | 32 | 33 |
34 | 36 | 37 | 75 | 76 | -------------------------------------------------------------------------------- /demo/animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | Animation 8 | 9 | 76 | 77 | 78 | 79 |
    80 | 81 | 82 | 83 | 161 | 162 | -------------------------------------------------------------------------------- /demo/debug.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | iSlider more animation 8 | 9 | 51 | 52 | 53 | 54 |
    55 | 67 | 68 | 69 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /demo/dom_default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 64 | 65 | 66 | 67 |
    68 | 69 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /demo/dom_slide_with_btn.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 85 | 86 | 87 | 88 |
    89 | 90 | 91 | 121 | 122 | -------------------------------------------------------------------------------- /demo/dom_vertical_slide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 64 | 65 | 66 | 67 |
    68 | 69 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /demo/dom_with_navigator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 82 | 83 | 84 | 85 |
    86 |
    87 | 88 | Home 89 | Page1 90 | Page2 91 | Page3 92 | Page4 93 | Page5 94 |
    95 |
    96 |
    97 | 98 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /demo/image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | iSlider loop 8 | 9 | 50 | 51 | 52 | 53 |
    54 | 57 | 58 | 59 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /demo/imgs/mob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-fe/iSlider/4d76b636b992f59cbedf55af60191331cc16e04d/demo/imgs/mob.png -------------------------------------------------------------------------------- /demo/imgs/pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-fe/iSlider/4d76b636b992f59cbedf55af60191331cc16e04d/demo/imgs/pic.jpg -------------------------------------------------------------------------------- /demo/intro.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | iSlider intro 7 | 8 | 9 | 10 | 13 | 14 | 15 |
    16 |

    iSlider Demo

    17 |
    18 | 30 |
    31 |
    32 |
    33 | 34 |
    35 |
    36 | 37 | 38 | -------------------------------------------------------------------------------- /demo/music_card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 127 | 128 | 129 | 130 | 131 |
    132 | 136 | 137 |
    138 | 139 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /demo/public/css/iSlider.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file iSlider.css 3 | */ 4 | 5 | /** 6 | * =========================== 7 | * iSlider 8 | * =========================== 9 | */ 10 | .islider-outer { 11 | display: block; 12 | position: relative; 13 | list-style: none; 14 | margin: 0; 15 | padding: 0; 16 | height: 100%; 17 | width: 100%; 18 | overflow: hidden; 19 | } 20 | 21 | .islider-outer > li { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | margin: 0; 26 | padding: 0; 27 | width: 100%; 28 | height: 100%; 29 | list-style: none; 30 | overflow: hidden; 31 | display: -moz-box; 32 | display: -webkit-box; 33 | display: box; 34 | -moz-box-pack: center; 35 | -webkit-box-pack: center; 36 | box-pack: center; 37 | -moz-box-align: center; 38 | -webkit-box-align: center; 39 | box-align: center; 40 | } 41 | 42 | .islider-img > img { 43 | max-width: 100%; 44 | max-height: 100%; 45 | } 46 | 47 | .islider-sliding { 48 | z-index: 0; 49 | } 50 | 51 | .islider-sliding-focus { 52 | z-index: 1; 53 | } 54 | 55 | /** 56 | * =========================== 57 | * iSlider.plugin.button 58 | * =========================== 59 | */ 60 | .islider-btn-outer { 61 | position: absolute; 62 | width: 3em; 63 | height: 3em; 64 | cursor: pointer; 65 | top: 0; 66 | bottom: 0; 67 | margin: auto 0; 68 | display: block; 69 | background-color: #777777; 70 | } 71 | 72 | .islider-btn-outer.left { 73 | left: 5%; 74 | } 75 | 76 | .islider-btn-outer.right { 77 | right: 5%; 78 | } 79 | 80 | .islider-btn-inner { 81 | position: absolute; 82 | width: 50%; 83 | height: 50%; 84 | border-top: 2px solid #ffffff; 85 | border-left: 2px solid #ffffff; 86 | margin: auto; 87 | top: 0; 88 | bottom: 0; 89 | left: 0; 90 | right: 0; 91 | } 92 | 93 | .islider-btn-outer.left > .islider-btn-inner { 94 | -webkit-transform: rotate(-45deg); 95 | -moz-transform: rotate(-45deg); 96 | -ms-transform: rotate(-45deg); 97 | -o-transform: rotate(-45deg); 98 | transform: rotate(-45deg); 99 | } 100 | 101 | .islider-btn-outer.right > .islider-btn-inner { 102 | -webkit-transform: rotate(135deg); 103 | -moz-transform: rotate(135deg); 104 | -ms-transform: rotate(135deg); 105 | -o-transform: rotate(135deg); 106 | transform: rotate(135deg); 107 | } 108 | 109 | /** 110 | * =========================== 111 | * iSlider.plugin.dot 112 | * =========================== 113 | */ 114 | .islider-dot-wrap { 115 | width: 80%; 116 | height: 10%; 117 | margin: 0 auto; 118 | position: absolute; 119 | padding: 0; 120 | left: 0; 121 | right: 0; 122 | bottom: 0; 123 | z-index: 10000; 124 | text-align: center; 125 | } 126 | 127 | .islider-dot { 128 | position: relative; 129 | display: inline-block; 130 | width: 0.8em; 131 | height: 0.8em; 132 | border-radius: 50%; 133 | border: 1px solid #ffffff; 134 | list-style: none; 135 | margin: 5px; 136 | } 137 | 138 | .islider-dot.active { 139 | background-color: #ffffff; 140 | } -------------------------------------------------------------------------------- /demo/public/css/index_old.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-size: 10px; 5 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 6 | } 7 | 8 | pre { 9 | margin: 0; 10 | } 11 | 12 | h3 { 13 | margin-bottom: 0; 14 | } 15 | 16 | ul { 17 | list-style: none; 18 | padding-left: 1em; 19 | } 20 | 21 | a { 22 | font-weight: 200; 23 | text-decoration: none; 24 | color: #000; 25 | } 26 | 27 | p { 28 | /*text-indent: 2em;*/ 29 | margin: 0; 30 | } 31 | 32 | td { 33 | line-height: 1.25em; 34 | padding: .5em .25em; 35 | } 36 | 37 | table { 38 | width: 100%; 39 | } 40 | 41 | tr { 42 | border: 1px solid #ccc; 43 | } 44 | 45 | /*thead th,*/ 46 | tr:nth-child(2n) { 47 | background-color: #f8f8f8; 48 | } 49 | 50 | .divider { 51 | height: 1px; 52 | margin: 7px 0; 53 | overflow: hidden; 54 | background: rgba(0,0,0,0.07); 55 | } 56 | 57 | .mobile-menu { 58 | display: none; 59 | } 60 | 61 | .summary { 62 | width: 300px; 63 | color: #364149; 64 | background: #fafafa; 65 | position: fixed; 66 | top: 0; 67 | bottom: 0; 68 | line-height: 2em; 69 | font-size: 1.4em; 70 | } 71 | 72 | .summary > h2 { 73 | margin: .5em 0 0; 74 | padding-left: 1rem; 75 | } 76 | 77 | .summary h3 { 78 | margin: 0; 79 | } 80 | 81 | .summary li { 82 | cursor: pointer; 83 | } 84 | 85 | .summary li > a { 86 | display: block; 87 | } 88 | 89 | .summary li > a:hover, 90 | .summary h3:hover { 91 | color: #008cff; 92 | } 93 | 94 | #section-content { 95 | margin-left: 300px; 96 | font-size: 16px; 97 | padding: 0 20px; 98 | } 99 | 100 | #section-content a{ 101 | color: #C30000; 102 | } 103 | 104 | #section-content a:hover { 105 | text-decoration: underline; 106 | } 107 | 108 | #section-content ul { 109 | list-style: initial; 110 | line-height: 1.5em; 111 | } 112 | 113 | #section-content p { 114 | line-height: 1.5em; 115 | } 116 | 117 | #section-content h2 { 118 | border-bottom: 1px solid #eee; 119 | margin: 0; 120 | line-height: 1.5em; 121 | } 122 | 123 | .animate-title { 124 | text-align: center; 125 | } 126 | 127 | .islider-demo-wrap { 128 | background: url('../../imgs/mob.png') no-repeat top center; 129 | background-size: 376px auto; 130 | text-align: center; 131 | height: 517.5px; 132 | position: relative; 133 | } 134 | 135 | .islider-demo-wrap > iframe, 136 | #iphone-fade { 137 | margin: 54.5px auto auto -102px; 138 | width: 203px; 139 | height: 358px; 140 | border: 0; 141 | background-color: #000; 142 | position: absolute; 143 | left: 50%; 144 | } 145 | 146 | #toggle-box { 147 | text-align: center; 148 | } 149 | 150 | #toggle-box button { 151 | min-width: 100px; 152 | color: #fff; 153 | background-color: #337ab7; 154 | outline: none; 155 | border-radius: 3px; 156 | border: 0; 157 | line-height: 25px; 158 | font-size: 14px; 159 | margin: 5px 10px; 160 | } 161 | 162 | #toggle-box button.active { 163 | background-color: #0fb748; 164 | } 165 | 166 | #toggle-box button:active { 167 | background-color: #286090; 168 | } 169 | 170 | #section-content table { 171 | margin: 20px 0; 172 | } 173 | 174 | .guide { 175 | position: absolute; 176 | top: 50px; 177 | left: 0; 178 | z-index: 100; 179 | width: 300px; 180 | height: 100pc; 181 | } 182 | 183 | .guide.open { 184 | visibility: visible; 185 | -webkit-transform: translate3d(0, 0, 0); 186 | transform: translate3d(0, 0, 0); 187 | } 188 | 189 | @media only screen and (max-device-width: 400px) { 190 | .summary { 191 | z-index: 100; 192 | width: 100%; 193 | height: 50px; 194 | /*background: #eee;*/ 195 | } 196 | .divider{ 197 | display: none; 198 | } 199 | .mobile-menu img { 200 | vertical-align: middle; 201 | } 202 | .guide { 203 | top: 0; 204 | visibility: hidden; 205 | background: #388a5a; 206 | } 207 | .summary h2 , .mobile-menu { 208 | vertical-align: middle; 209 | display: inline-block; 210 | } 211 | #section-content { 212 | width: 98%; 213 | margin-left: 2%; 214 | padding: 0; 215 | } 216 | } -------------------------------------------------------------------------------- /demo/public/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-fe/iSlider/4d76b636b992f59cbedf55af60191331cc16e04d/demo/public/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /demo/public/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-fe/iSlider/4d76b636b992f59cbedf55af60191331cc16e04d/demo/public/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /demo/public/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-fe/iSlider/4d76b636b992f59cbedf55af60191331cc16e04d/demo/public/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /demo/public/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-fe/iSlider/4d76b636b992f59cbedf55af60191331cc16e04d/demo/public/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /demo/public/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-fe/iSlider/4d76b636b992f59cbedf55af60191331cc16e04d/demo/public/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /demo/public/js/iSlider.animate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * More animations 3 | * @file animate.js 4 | * @author BE-FE Team 5 | * xieyu33333 xieyu33333@gmail.com 6 | * shinate shine.wangrs@gmail.com 7 | */ 8 | 9 | (function (global, factory) { 10 | /* CommonJS */ 11 | if (typeof require === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) 12 | factory(require('./iSlider')); 13 | /* AMD */ 14 | else if (typeof define === 'function' && define['amd']) 15 | define(['./iSlider'], function (iSlider) { 16 | factory(iSlider); 17 | }); 18 | /* Global */ 19 | else 20 | factory(global['iSlider']); 21 | 22 | })(window ? window : this, function (iSlider) { 23 | 24 | 'use strict'; 25 | 26 | iSlider && iSlider.extend(iSlider._animateFuncs, { 27 | // rotate 28 | rotate: (function () { 29 | function rotate(dom, axis, scale, i, offset, direct) { 30 | var rotateDirect = (axis === 'X') ? 'Y' : 'X'; 31 | 32 | if (this.isVertical) { 33 | offset = -offset; 34 | if (Math.abs(direct) > 1) { 35 | direct = -direct; 36 | } 37 | } 38 | 39 | var outer = dom.parentElement; 40 | iSlider.setStyle(outer, 'perspective', scale * 4); 41 | 42 | dom.style.visibility = 'visible'; 43 | if (direct > 0 && i === 2) { 44 | dom.style.visibility = 'hidden'; 45 | } 46 | if (direct < 0 && i === 0) { 47 | dom.style.visibility = 'hidden'; 48 | } 49 | dom.style.zIndex = i === 1 ? 1 : 0; 50 | 51 | dom.style.cssText += iSlider.styleProp('backface-visibility') + ':hidden;' + iSlider.styleProp('transform-style') + ':preserve-3d;' + 'position:absolute;'; 52 | 53 | // TODO: overflow... I dont understand why there are many differences between ios and desktop. Maybe they have different interpretations of Perspective 54 | iSlider.setStyle(dom, 'transform', 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.889 * scale / 2) + 'px) scale(0.889)'); 55 | } 56 | 57 | rotate.effect = iSlider.styleProp('transform'); 58 | rotate.reverse = true; 59 | return rotate; 60 | })(), 61 | // flip 62 | flip: (function () { 63 | function flip(dom, axis, scale, i, offset, direct) { 64 | if (this.isVertical) { 65 | offset = -offset; 66 | } 67 | 68 | var outer = dom.parentElement; 69 | iSlider.setStyle(outer, 'perspective', scale * 4); 70 | 71 | dom.style.visibility = 'visible'; 72 | if (direct > 0 && i === 2) { 73 | dom.style.visibility = 'hidden'; 74 | } 75 | if (direct < 0 && i === 0) { 76 | dom.style.visibility = 'hidden'; 77 | } 78 | 79 | dom.style.cssText += 'position:absolute;' + iSlider.styleProp('backface-visibility') + ':hidden'; 80 | iSlider.setStyle(dom, 'transform', 'translateZ(' + (scale / 2) + 'px) rotate' + ((axis === 'X') ? 'Y' : 'X') + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)'); 81 | } 82 | 83 | flip.effect = iSlider.styleProp('transform'); 84 | flip.reverse = true; 85 | return flip; 86 | })(), 87 | depth: (function () { 88 | 89 | function depth(dom, axis, scale, i, offset, direct) { 90 | var zoomScale = (4 - Math.abs(i - 1)) * 0.18; 91 | var outer = dom.parentElement; 92 | iSlider.setStyle(outer, 'perspective', scale * 4); 93 | dom.style.zIndex = i === 1 ? 1 : 0; 94 | iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)'); 95 | } 96 | 97 | depth.effect = iSlider.styleProp('transform'); 98 | return depth; 99 | })(), 100 | flow: (function () { 101 | function flow(dom, axis, scale, i, offset, direct) { 102 | var absoluteOffset = Math.abs(offset); 103 | var rotateDirect = (axis === 'X') ? 'Y' : 'X'; 104 | var directAmend = (axis === 'X') ? 1 : -1; 105 | var offsetRatio = Math.abs(offset / scale); 106 | var outer = dom.parentElement; 107 | 108 | iSlider.setStyle(outer, 'perspective', scale * 4); 109 | 110 | if (i === 1) { 111 | dom.style.zIndex = scale - absoluteOffset; 112 | } 113 | else { 114 | dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset : (i - 1) * absoluteOffset; 115 | } 116 | 117 | iSlider.setStyle(dom, 'transform', 'scale(0.7, 0.7) translateZ(' + (offsetRatio * 150 - 150) * Math.abs(i - 1) + 'px)' + 'translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)' + 'rotate' + rotateDirect + '(' + directAmend * (30 - offsetRatio * 30) * (1 - i) + 'deg)'); 118 | } 119 | 120 | flow.effect = iSlider.styleProp('transform'); 121 | return flow; 122 | })(), 123 | card: (function () { 124 | function card(dom, axis, scale, i, offset, direct) { 125 | var absoluteOffset = Math.abs(offset); 126 | var zoomScale = 1; 127 | var z = 1; 128 | 129 | if (absoluteOffset > 0) { 130 | if (i === 1) { 131 | zoomScale = 1 - 0.2 * Math.abs(i - 1) - Math.abs(0.2 * offset / scale).toFixed(6); 132 | z = 0; 133 | } 134 | } else { 135 | if (i !== 1) { 136 | if ((direct > 0 && i === 0) || (direct < 0 && i === 2)) { 137 | zoomScale = 1 - 0.2 * Math.abs(i - 1); 138 | } 139 | z = 0; 140 | } 141 | } 142 | dom.style.zIndex = z; 143 | iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + ((1 + Math.abs(i - 1) * 0.2) * offset + scale * (i - 1)) + 'px)'); 144 | } 145 | 146 | card.effect = iSlider.styleProp('transform'); 147 | return card; 148 | })(), 149 | fade: (function () { 150 | function fade(dom, axis, scale, i, offset, direct) { 151 | dom.style.zIndex = i === 1 ? 1 : 0; 152 | offset = Math.abs(offset); 153 | if (i === 1) { 154 | dom.style.opacity = 1 - (offset / scale); 155 | } else { 156 | dom.style.opacity = offset / scale; 157 | } 158 | } 159 | 160 | fade.effect = 'opacity'; 161 | return fade; 162 | })(), 163 | zoomout: (function () { 164 | var lsn; 165 | 166 | function zoomout(dom, axis, scale, i, offset) { 167 | var z, o, s; 168 | 169 | var oa = offset / scale; 170 | switch (i) { 171 | case 0: 172 | lsn && window.clearTimeout(lsn); 173 | o = oa < 1 ? oa : 1; 174 | s = 2 - (0.5 * oa); 175 | z = 2; 176 | var at = parseInt(window.getComputedStyle(dom)[iSlider.styleProp('transitionDuration', 1)]) * 1000; 177 | if (at > 0) { 178 | lsn = window.setTimeout(function () { 179 | dom.style.zIndex = 0; 180 | }, at); 181 | } 182 | break; 183 | case 1: 184 | o = 1 - oa; 185 | s = 1 - (0.5 * oa); 186 | z = 1; 187 | break; 188 | case 2: 189 | o = oa > 0 ? oa : 0; 190 | s = 0.5 - (0.5 * oa); 191 | z = 0; 192 | break; 193 | } 194 | dom.style.cssText += 'z-index:' + z + ';opacity:' + o + ';' + iSlider.styleProp('transform') + ':scale(' + s + ');'; 195 | } 196 | 197 | zoomout.reverse = true; 198 | return zoomout; 199 | })() 200 | }); 201 | }); -------------------------------------------------------------------------------- /demo/public/js/iSlider.animate.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("./iSlider")):"function"==typeof define&&define.amd?define(["./iSlider"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.extend(e._animateFuncs,{rotate:function(){function t(t,s,i,n,r,a){var o="X"===s?"Y":"X";this.isVertical&&(r=-r,Math.abs(a)>1&&(a=-a));var l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),a<0&&0===n&&(t.style.visibility="hidden"),t.style.zIndex=1===n?1:0,t.style.cssText+=e.styleProp("backface-visibility")+":hidden;"+e.styleProp("transform-style")+":preserve-3d;position:absolute;",e.setStyle(t,"transform","rotate"+o+"("+90*(r/i+n-1)+"deg) translateZ("+.889*i/2+"px) scale(0.889)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),flip:function(){function t(t,s,i,n,r,a){this.isVertical&&(r=-r);var o=t.parentElement;e.setStyle(o,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),a<0&&0===n&&(t.style.visibility="hidden"),t.style.cssText+="position:absolute;"+e.styleProp("backface-visibility")+":hidden",e.setStyle(t,"transform","translateZ("+i/2+"px) rotate"+("X"===s?"Y":"X")+"("+180*(r/i+n-1)+"deg) scale(0.875)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),depth:function(){function t(t,s,i,n,r,a){var o=.18*(4-Math.abs(n-1)),l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.zIndex=1===n?1:0,e.setStyle(t,"transform","scale("+o+") translateZ(0) translate"+s+"("+(r+1.3*i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),flow:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l="X"===s?"Y":"X",c="X"===s?1:-1,f=Math.abs(r/i),y=t.parentElement;e.setStyle(y,"perspective",4*i),1===n?t.style.zIndex=i-o:t.style.zIndex=r>0?(1-n)*o:(n-1)*o,e.setStyle(t,"transform","scale(0.7, 0.7) translateZ("+(150*f-150)*Math.abs(n-1)+"px)translate"+s+"("+(r+i*(n-1))+"px)rotate"+l+"("+c*(30-30*f)*(1-n)+"deg)")}return t.effect=e.styleProp("transform"),t}(),card:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l=1,c=1;o>0?1===n&&(l=1-.2*Math.abs(n-1)-Math.abs(.2*r/i).toFixed(6),c=0):1!==n&&((a>0&&0===n||a<0&&2===n)&&(l=1-.2*Math.abs(n-1)),c=0),t.style.zIndex=c,e.setStyle(t,"transform","scale("+l+") translateZ(0) translate"+s+"("+((1+.2*Math.abs(n-1))*r+i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),fade:function(){function e(e,t,s,i,n,r){e.style.zIndex=1===i?1:0,n=Math.abs(n),1===i?e.style.opacity=1-n/s:e.style.opacity=n/s}return e.effect="opacity",e}(),zoomout:function(){function t(t,i,n,r,a){var o,l,c,f=a/n;switch(r){case 0:s&&window.clearTimeout(s),l=f<1?f:1,c=2-.5*f,o=2;var y=1e3*parseInt(window.getComputedStyle(t)[e.styleProp("transitionDuration",1)]);y>0&&(s=window.setTimeout(function(){t.style.zIndex=0},y));break;case 1:l=1-f,c=1-.5*f,o=1;break;case 2:l=f>0?f:0,c=.5-.5*f,o=0}t.style.cssText+="z-index:"+o+";opacity:"+l+";"+e.styleProp("transform")+":scale("+c+");"}var s;return t.reverse=!0,t}()})}); -------------------------------------------------------------------------------- /demo/public/js/iSlider.plugin.BIZone.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Boundary Identification Zone 3 | * 4 | * @file BIZone.js 5 | * @author BE-FE Team 6 | * shinate shine.wangrs@gmail.com 7 | */ 8 | 9 | (function (global, factory) { 10 | /* CommonJS */ 11 | if (typeof require === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) 12 | factory(require('islider.js')); 13 | /* AMD */ 14 | else if (typeof define === 'function' && define['amd']) 15 | define(['islider.js'], function (iSlider) { 16 | factory(iSlider); 17 | }); 18 | /* Global */ 19 | else 20 | factory(global['iSlider']); 21 | 22 | })(window ? window : this, function (iSlider) { 23 | 24 | 'use strict'; 25 | 26 | iSlider && iSlider.regPlugin('BIZone', function (opts) { 27 | 28 | var HANDLE = this; 29 | var zoneSize = parseZone(opts.size || 0); 30 | var device = this.deviceEvents; 31 | var outer = HANDLE.outer; 32 | 33 | var range = initRange(); 34 | 35 | function parseZone(sizes) { 36 | if (typeof sizes === 'number') { 37 | if (sizes < 0) { 38 | sizes = 0; 39 | } 40 | return [sizes, sizes, sizes, sizes]; 41 | } else if (sizes instanceof Array) { 42 | switch (sizes.length) { 43 | case 4: 44 | return sizes; 45 | case 3: 46 | return [sizes[0], sizes[1], sizes[2], sizes[1]]; 47 | case 2: 48 | return [sizes[0], sizes[1], sizes[0], sizes[1]]; 49 | case 1: 50 | return [sizes[0], sizes[0], sizes[0], sizes[0]]; 51 | } 52 | } 53 | 54 | return [0, 0, 0, 0]; 55 | } 56 | 57 | function initRange() { 58 | var docEl = outer.ownerDocument.documentElement; 59 | var box = {top: 0, left: 0}; 60 | if (typeof outer.getBoundingClientRect !== 'undefined') { 61 | box = outer.getBoundingClientRect(); 62 | } 63 | 64 | var top = box.top + ( window.pageYOffset || docEl.scrollTop ) - ( docEl.clientTop || 0 ); 65 | var left = box.left + ( window.pageXOffset || docEl.scrollLeft ) - ( docEl.clientLeft || 0 ); 66 | 67 | return [ 68 | top, // top 69 | left + outer.offsetWidth, // right 70 | top + outer.offsetHeight, // bottom 71 | left // left 72 | ]; 73 | } 74 | 75 | if (zoneSize.filter(function (i) { 76 | return i > 0; 77 | }).length > 0) { 78 | HANDLE.on('slide', function (evt) { 79 | var finger = device.hasTouch ? evt.targetTouches[0] : evt; 80 | var pos = [finger.pageY, finger.pageX, finger.pageY, finger.pageX]; 81 | for (var i = 0; i < 4; i++) { 82 | if (Math.abs(pos[i] - range[i]) < zoneSize[i]) { 83 | this.endHandler(new Event(device.endEvt)); 84 | break; 85 | } 86 | } 87 | }); 88 | } 89 | }); 90 | }); -------------------------------------------------------------------------------- /demo/public/js/iSlider.plugin.BIZone.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("islider.js")):"function"==typeof define&&define.amd?define(["islider.js"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.regPlugin("BIZone",function(e){function t(e){if("number"==typeof e)return e<0&&(e=0),[e,e,e,e];if(e instanceof Array)switch(e.length){case 4:return e;case 3:return[e[0],e[1],e[2],e[1]];case 2:return[e[0],e[1],e[0],e[1]];case 1:return[e[0],e[0],e[0],e[0]]}return[0,0,0,0]}function n(){var e=f.ownerDocument.documentElement,t={top:0,left:0};"undefined"!=typeof f.getBoundingClientRect&&(t=f.getBoundingClientRect());var n=t.top+(window.pageYOffset||e.scrollTop)-(e.clientTop||0),i=t.left+(window.pageXOffset||e.scrollLeft)-(e.clientLeft||0);return[n,i+f.offsetWidth,n+f.offsetHeight,i]}var i=this,o=t(e.size||0),r=this.deviceEvents,f=i.outer,u=n();o.filter(function(e){return e>0}).length>0&&i.on("slide",function(e){for(var t=r.hasTouch?e.targetTouches[0]:e,n=[t.pageY,t.pageX,t.pageY,t.pageX],i=0;i<4;i++)if(Math.abs(n[i]-u[i])1&&(r=l[1]-0,n=l[2]-0),"none"===s)return a;var f,c=s.match(/^matrix3d\((.+)\)$/),p=s.match(/^matrix\((.+)\)$/);return c?(f=c[1].split(", "),a={translateX:f[12]-0,translateY:f[13]-0,translateZ:f[14]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[5]-0,scaleZ:f[10]-0}):p&&(f=p[1].split(", "),a={translateX:f[4]-0,translateY:f[5]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[3]-0}),a}function l(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}function f(t){T=1,x=t&&t.zoomFactor||2}function c(t){D.call(this,t);var e=this.els[1].querySelector("img:first-child"),a=this.deviceEvents;if(a.hasTouch&&null!==e){O=!0;var r=i(e);b=s(t.targetTouches),w=r.translateX-0,k=r.translateY-0,T=r.scaleX,Y=e;var o=v(e);if(2==t.targetTouches.length){H=null;var f=t.touches,c=l({x:f[0].pageX,y:f[0].pageY},{x:f[1].pageX,y:f[1].pageY});e.style.webkitTransformOrigin=n(c.x-o.left,c.y-o.top)}else if(1===t.targetTouches.length){var p=(new Date).getTime();S=0,p-H<300&&(t.preventDefault(),S=3),H=p}}}function p(t){if(O){var e=0,a=Y,r=this.deviceEvents;if(r.hasTouch&&(2===t.targetTouches.length?(a.style.webkitTransitionDuration="0",t.preventDefault(),h(t),e=2):1===t.targetTouches.length&&T>1&&(a.style.webkitTransitionDuration="0",t.preventDefault(),g.call(this,t),e=1),S=e,e>0))return}j.call(this,t)}function u(t){var e=e||2,r=Y,s=v(r);T=1==T?e:1,r.style.webkitTransform=a(0,0,0,T),1!=T&&(r.style.webkitTransformOrigin=n(t.touches[0].pageX-s.left,t.touches[0].pageY-s.top))}function h(t){var e=s(t.targetTouches),r=o(b,e),n=Y;r=T*r0)return}W.call(this,t)}function g(t){var e=Y,r=this.deviceEvents,n={X:r.hasTouch?t.targetTouches[0].pageX-this.startX:t.pageX-this.startX,Y:r.hasTouch?t.targetTouches[0].pageY-this.startY:t.pageY-this.startY},s={x:w+n.X-0,y:k+n.Y-0};e.style.webkitTransform=a(s.x,s.y,0,T)}function v(t){var e={left:0,top:0};do e.top+=t.offsetTop||0,e.left+=t.offsetLeft||0,t=t.offsetParent;while(t);return e}function m(t,e,a){var r,n,s=v(t);C={start:{left:s.left,top:s.top},end:{left:s.left+t.clientWidth,top:s.top+t.clientHeight}};var o=1==a?"left":"top";return r=C.start[o],n=C.end[o],e>=r&&e<=n}function X(t,e){var a=0,r=m(t,e.start.left,1),n=m(t,e.end.left,1),s=m(t,e.start.top,0),o=m(t,e.end.top,0);return r!=n&&s!=o?a=r&&o?1:r&&s?2:n&&o?3:4:r==n?!s&&o?a=5:!o&&s&&(a=6):s==o?!r&&n?a=7:r&&!n&&(a=8):s==o==r==n&&(a=9),a}function y(){if(1!=T){var t,e,r,n,s,o,l,f,c,p,u=Y;switch(r=i(u),c=u.parentNode,n=u.clientWidth*r.scaleX,s=u.clientHeight*r.scaleX,o=v(u),l={left:(1-r.scaleX)*r.offsetX+o.left+r.translateX,top:(1-r.scaleX)*r.offsetY+o.top+r.translateY},f={left:l.left+n,top:l.top+s},t=l.left,e=l.top,p=X(c,{start:l,end:f})){case 1:t=C.start.left,e=C.end.top-s;break;case 2:t=C.start.left,e=C.start.top;break;case 3:t=C.end.left-n,e=C.end.top-s;break;case 4:t=C.end.left-n,e=C.start.top;break;case 5:e=C.end.top-s;break;case 6:e=C.start.top;break;case 7:t=C.end.left-n;break;case 8:t=C.start.left}n' + el.textContent + ''); 95 | }); 96 | cf[1].innerHTML = o.join(''); 97 | }); 98 | 99 | // Check and add "+" 100 | 101 | Array.prototype.forEach.call(document.querySelectorAll('#menu ul'), function (el) { 102 | var target = el.previousElementSibling; 103 | if (target.nodeName.toUpperCase() === 'A') { 104 | var plus = document.createElement('span'); 105 | plus.className = 'submenu-indicator'; 106 | target.appendChild(plus); 107 | } 108 | }); -------------------------------------------------------------------------------- /demo/public/js/index_old.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | 3 | var hljs = window.hljs; 4 | var demoCode = $('#demo-code'); 5 | var toggleBox = $('#toggle-box'); 6 | 7 | var frameSet = $('#frameset'); 8 | frameSet.on('load', function () { 9 | setShowCode($(this).get(0)); 10 | }); 11 | 12 | toggleBox.on('click', 'button', function () { 13 | var el = $(this); 14 | toggleBox.find('.active').removeClass('active'); 15 | el.addClass('active'); 16 | frameSet.attr('src', el.data('target')); 17 | }); 18 | 19 | function setShowCode(iframe) { 20 | demoCode.text(iframe.contentDocument.getElementById('show-code').innerHTML); 21 | hljs.highlightBlock(demoCode.get(0)); 22 | } 23 | 24 | $(document).ready(function () { 25 | setShowCode(frameSet.get(0)); 26 | }); 27 | 28 | })(jQuery); -------------------------------------------------------------------------------- /demo/public/js/logo.js: -------------------------------------------------------------------------------- 1 | // iSlider 2 | 'console' in window && window.console.log([ 3 | ' ________ __ __', 4 | ' __ /\\________\\/\\__\\__ /\\__\\', 5 | ' /\\__\\/ / ______/ / /\\__\\______/ / /____ _____', 6 | ' _\\/__/ / /____\\/ / /\\/__/\\_____\\/ /\\_____\\ /\\_____\\', 7 | ' /\\__\\_\\/_____ / / /\\__\\/ / ___ / / __ \\/ / __/', 8 | '/ / /\\_____\\/ / / / / / / /_\\/ /\\/ _____/ / /', 9 | '\\/__/\\/________/\\/__/\\/__/\\/________/ \\_____/ \\/__/', 10 | '', 11 | '' 12 | ].join('\n')); -------------------------------------------------------------------------------- /demo/public/js/queue.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 3 | typeof define === 'function' && define.amd ? define('queue', factory) : 4 | (global.queue = factory()); 5 | }(this, function () { 'use strict'; 6 | 7 | var slice = [].slice; 8 | var running = {}; 9 | function noop() {} 10 | 11 | function queue(parallelism) { 12 | var q, 13 | tasks = [], 14 | started = 0, // number of tasks that have been started (and perhaps finished) 15 | active = 0, // number of tasks currently being executed (started but not finished) 16 | remaining = 0, // number of tasks not yet finished 17 | popping, // inside a synchronous task callback? 18 | error = null, 19 | callback = noop, 20 | callbackAll; 21 | 22 | parallelism = arguments.length ? +parallelism : Infinity; 23 | 24 | function pop() { 25 | while (popping = started < tasks.length && active < parallelism) { 26 | var i = started++, 27 | t = tasks[i], 28 | j = t.length - 1, 29 | c = t[j]; 30 | tasks[i] = running; 31 | ++active; 32 | t[j] = finished(i); 33 | c.apply(null, t); 34 | } 35 | } 36 | 37 | function finished(i) { 38 | return function(e, r) { 39 | if (tasks[i] !== running) throw new Error; 40 | tasks[i] = null; 41 | --active; 42 | if (error != null) return; 43 | if (e != null) { 44 | error = e; // ignore new tasks and squelch active callbacks 45 | started = remaining = NaN; // stop queued tasks from starting 46 | notify(); 47 | } else { 48 | tasks[i] = r; 49 | if (--remaining) popping || pop(); 50 | else notify(); 51 | } 52 | }; 53 | } 54 | 55 | function check() { 56 | if (callback !== noop) throw new Error; 57 | } 58 | 59 | function notify() { 60 | if (error != null) callback(error); 61 | else if (callbackAll) callback(error, tasks); 62 | else callback.apply(null, [error].concat(tasks)); 63 | } 64 | 65 | return q = { 66 | defer: function(f) { 67 | check(); 68 | if (!error) { 69 | var t = slice.call(arguments, 1); 70 | t.push(f); 71 | tasks.push(t); 72 | ++remaining; 73 | pop(); 74 | } 75 | return q; 76 | }, 77 | await: function(f) { 78 | check(); 79 | callback = f, callbackAll = false; 80 | if (!remaining) notify(); 81 | return q; 82 | }, 83 | awaitAll: function(f) { 84 | check(); 85 | callback = f, callbackAll = true; 86 | if (!remaining) notify(); 87 | return q; 88 | } 89 | }; 90 | } 91 | 92 | queue.version = "1.1.0"; 93 | 94 | return queue; 95 | 96 | })); -------------------------------------------------------------------------------- /demo/switch-animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 54 | 55 | 56 | 57 |
    58 |
    59 |

    大家好！
    60 | 由于项目需要，使用了 iSlider 2.X, 每页的数据长度不定可能需要滚动，所以按照文档 设置了fixPage:false，
    61 | 但是在左右滑动切换的时候 同时又产生了上下滑动，就会出现下图一样的效果，画面停止不会回弹，导致无法正常使用，
    62 | 请开发组的同志们帮忙看看有什么解决办法吗？谢谢！！（小米手机自带浏览器居然能正常运行没有这个问题）！！！
    63 | 由于项目需要，使用了 iSlider 2.X, 每页的数据长度不定可能需要滚动，所以按照文档 设置了fixPage:false，
    64 | 但是在左右滑动切换的时候 同时又产生了上下滑动，就会出现下图一样的效果，画面停止不会回弹，导致无法正常使用，
    65 | 请开发组的同志们帮忙看看有什么解决办法吗？谢谢！！（小米手机自带浏览器居然能正常运行没有这个问题）！！！
    66 | 由于项目需要，使用了 iSlider 2.X, 每页的数据长度不定可能需要滚动，所以按照文档 设置了fixPage:false，
    67 | 但是在左右滑动切换的时候 同时又产生了上下滑动，就会出现下图一样的效果，画面停止不会回弹，导致无法正常使用，
    68 | 请开发组的同志们帮忙看看有什么解决办法吗？谢谢！！（小米手机自带浏览器居然能正常运行没有这个问题）！！！
    69 | 由于项目需要，使用了 iSlider 2.X, 每页的数据长度不定可能需要滚动，所以按照文档 设置了fixPage:false，
    70 | 但是在左右滑动切换的时候 同时又产生了上下滑动，就会出现下图一样的效果，画面停止不会回弹，导致无法正常使用，
    71 | 请开发组的同志们帮忙看看有什么解决办法吗？谢谢！！（小米手机自带浏览器居然能正常运行没有这个问题）！！！
    72 | qq 20151106184244

    76 |
    77 | 78 | 79 | 223 | 224 | -------------------------------------------------------------------------------- /demo/swop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | S.W.O.P 8 | 9 | 44 | 45 | 46 |
    47 |
    48 | 49 | 50 | 106 | 107 | -------------------------------------------------------------------------------- /gulp/config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var conf = require('json-config-reader').read('package.json'); 4 | 5 | module.exports = { 6 | src: './src', 7 | demo: './demo/public', 8 | build: './build', 9 | version: conf.version, 10 | name: conf.name 11 | }; -------------------------------------------------------------------------------- /gulp/tasks/build.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (gulp, PLUGIN, CONF) { 4 | gulp.task('build', ['up-version', 'css', 'js']); 5 | }; -------------------------------------------------------------------------------- /gulp/tasks/clean.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (gulp, PLUGIN, CONF) { 4 | 5 | var clean = PLUGIN.clean; 6 | 7 | gulp.task('clean', function () { 8 | gulp.src([ 9 | CONF.build + '/*' 10 | ], { 11 | read: false 12 | }) 13 | .pipe(clean()); 14 | }); 15 | 16 | }; -------------------------------------------------------------------------------- /gulp/tasks/css.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (gulp, PLUGIN, CONF) { 4 | 5 | var cssmin = PLUGIN.cssmin; 6 | var rename = PLUGIN.rename; 7 | 8 | gulp.task('css', function () { 9 | gulp.src([CONF.src + '/style/iSlider.css']) 10 | .pipe(gulp.dest(CONF.demo + '/css')) 11 | .pipe(gulp.dest(CONF.build)) 12 | .pipe(cssmin()) 13 | .pipe(rename({ 14 | suffix: '.min' 15 | })) 16 | .pipe(gulp.dest(CONF.build)); 17 | }); 18 | }; -------------------------------------------------------------------------------- /gulp/tasks/default.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (gulp, PLUGIN, CONF) { 4 | gulp.task('default', ['build', 'webpack']); 5 | }; -------------------------------------------------------------------------------- /gulp/tasks/externals.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (gulp, PLUGIN, CONF) { 4 | 5 | var uglify = PLUGIN.uglify; 6 | var rename = PLUGIN.rename; 7 | 8 | gulp.task('externals', function () { 9 | return gulp.src(['src/js/ext/*.js']) 10 | .pipe(rename(function (path) { 11 | path.basename = "iSlider." + path.basename; 12 | })) 13 | .pipe(gulp.dest(CONF.demo + '/js')) 14 | .pipe(gulp.dest(CONF.build)) 15 | .pipe(uglify()) 16 | .pipe(rename({ 17 | suffix: '.min' 18 | })) 19 | .pipe(gulp.dest(CONF.demo + '/js')) 20 | .pipe(gulp.dest(CONF.build)); 21 | }); 22 | }; -------------------------------------------------------------------------------- /gulp/tasks/iSlider.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var through = require('through-gulp'); 4 | 5 | module.exports = function (gulp, PLUGIN, CONF) { 6 | 7 | var uglify = PLUGIN.uglify; 8 | var rename = PLUGIN.rename; 9 | 10 | gulp.task('iSlider', function () { 11 | return gulp.src(['src/js/iSlider.js']) 12 | .pipe(gulp.dest(CONF.demo + '/js')) 13 | .pipe(gulp.dest(CONF.build)) 14 | .pipe(through(function (file, env, cb) { 15 | file.contents = new Buffer(file.contents.toString().replace(/this\.log\([^\n]+\);?\n/g, function (rep) { 16 | return ''; 17 | })); 18 | this.push(file); 19 | cb(); 20 | })) 21 | .pipe(uglify()) 22 | .pipe(rename({ 23 | suffix: '.min' 24 | })) 25 | .pipe(gulp.dest(CONF.demo + '/js')) 26 | .pipe(gulp.dest(CONF.build)); 27 | }); 28 | }; -------------------------------------------------------------------------------- /gulp/tasks/js.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (gulp, PLUGIN, CONF) { 4 | gulp.task('js', ['iSlider', 'externals', 'plugins']); 5 | }; -------------------------------------------------------------------------------- /gulp/tasks/plugins.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (gulp, PLUGIN, CONF) { 4 | 5 | var uglify = PLUGIN.uglify; 6 | var rename = PLUGIN.rename; 7 | 8 | gulp.task('plugins', function () { 9 | return gulp.src(['src/js/plugins/*.js']) 10 | .pipe(rename(function (path) { 11 | path.basename = "iSlider.plugin." + path.basename; 12 | })) 13 | .pipe(gulp.dest(CONF.demo + '/js')) 14 | .pipe(gulp.dest(CONF.build)) 15 | .pipe(uglify()) 16 | .pipe(rename({ 17 | suffix: '.min' 18 | })) 19 | .pipe(gulp.dest(CONF.demo + '/js')) 20 | .pipe(gulp.dest(CONF.build)); 21 | }); 22 | }; -------------------------------------------------------------------------------- /gulp/tasks/up-version.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var fs = require('fs'); 4 | 5 | module.exports = function (gulp, PLUGIN, CONF) { 6 | gulp.task('up-version', function (cb) { 7 | var version = CONF.version; 8 | fs.writeFileSync('bower.json', new Buffer(fs.readFileSync('bower.json').toString().replace(/\"version\": \"[^\"]+\"/, function () { 9 | return '"version": "' + version + '"'; 10 | }))); 11 | 12 | fs.writeFileSync(CONF.src + '/js/iSlider.js', new Buffer(fs.readFileSync(CONF.src + '/js/iSlider.js').toString().replace(/iSlider\.VERSION = \'[^\']+\'/, function () { 13 | return 'iSlider.VERSION = \'' + version + '\''; 14 | }))); 15 | 16 | cb(); 17 | }); 18 | }; -------------------------------------------------------------------------------- /gulp/tasks/watch.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (gulp, PLUGIN, CONF) { 4 | gulp.task('watch', function () { 5 | gulp.watch([CONF.src + '/**/*.js', CONF.src + '/*.css'], ['js', 'css']); 6 | }); 7 | }; -------------------------------------------------------------------------------- /gulp/tasks/webpack.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (gulp, PLUGIN, CONF) { 4 | var webpack = require('webpack'); 5 | var path = require('path'); 6 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 7 | var options = { 8 | entry: {index: path.resolve(__dirname, '../../src/index.js')}, 9 | 10 | output: { 11 | path: path.resolve(__dirname, '../../build/'), 12 | filename: 'index.bundle.js', 13 | library: 'iSlider', 14 | libraryTarget: 'umd' 15 | }, 16 | 17 | module: { 18 | loaders: [ 19 | {test: /\.css$/, loader: 'style-loader!css-loader'} 20 | ] 21 | } 22 | }; 23 | 24 | gulp.task('webpack', ['build'], function () { 25 | return webpack(options).run(function(err, stats) { 26 | if (!err) { 27 | process.stdout.write(stats.toString({ 28 | context: '/Users/xieyu/Desktop/frontEnd/MobileWeb/MSlider', 29 | colors: { level: 2, hasBasic: true, has256: true, has16m: false }, 30 | cached: false, 31 | cachedAssets: false, 32 | modules: true, 33 | chunks: false, 34 | reasons: false, 35 | errorDetails: false, 36 | chunkOrigins: false, 37 | exclude: [ 'node_modules', 'bower_components', 'jam', 'components' ] 38 | }) + "\n"); 39 | } 40 | else { 41 | console.log(err); 42 | } 43 | }); 44 | }); 45 | }; -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var plugin = require('gulp-load-plugins')(); 5 | var config = require('./gulp/config.js'); 6 | 7 | var tasks = require('require-dir')('./gulp/tasks/'); 8 | for (var t in tasks) { 9 | tasks[t](gulp, plugin, config); 10 | } -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // Generated on Wed Dec 09 2015 18:06:00 GMT+0800 (CST) 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | 7 | // base path that will be used to resolve all patterns (eg. files, exclude) 8 | basePath: '', 9 | 10 | 11 | // frameworks to use 12 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 13 | frameworks: ['mocha'], 14 | 15 | 16 | // list of files / patterns to load in the browser 17 | files: [ 18 | 'src/style/iSlider.css', 19 | 'src/js/iSlider.js', 20 | 'src/js/ext/*.js', 21 | 'src/js/plugins/*.js', 22 | 'test/iSlider.test.js' 23 | ], 24 | 25 | 26 | // list of files to exclude 27 | exclude: [], 28 | 29 | 30 | // preprocess matching files before serving them to the browser 31 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 32 | preprocessors: { 33 | 'src/**/*.js': ['coverage'], 34 | }, 35 | 36 | // optionally, configure the reporter 37 | coverageReporter: { 38 | type: 'html', 39 | dir: 'test/coverage/' 40 | }, 41 | 42 | 43 | // test results reporter to use 44 | // possible values: 'dots', 'progress' 45 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 46 | reporters: ['progress', 'coverage'], 47 | 48 | 49 | // web server port 50 | port: 9876, 51 | 52 | 53 | // enable / disable colors in the output (reporters and logs) 54 | colors: true, 55 | 56 | 57 | // level of logging 58 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 59 | logLevel: config.LOG_INFO, 60 | 61 | 62 | // enable / disable watching file and executing tests whenever any file changes 63 | autoWatch: true, 64 | 65 | 66 | // start these browsers 67 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 68 | browsers: ['Chrome'], 69 | 70 | 71 | // Continuous Integration mode 72 | // if true, Karma captures browsers, runs the tests and exits 73 | singleRun: false, 74 | 75 | // Concurrency level 76 | // how many browser should be started simultanous 77 | concurrency: Infinity 78 | }) 79 | } 80 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "islider.js", 3 | "version": "2.2.5", 4 | "author": "EUX team", 5 | "main": "build/index.bundle.js", 6 | "description": "Smooth and high-performance slide web framework. Suitable for PC, Mobile WebApp, HTML5 App, Hybrid App", 7 | "devDependencies": { 8 | "css-loader": "^0.24.0", 9 | "eslint": "^1.10.3", 10 | "extract-text-webpack-plugin": "^1.0.1", 11 | "fs": "0.0.2", 12 | "gulp": "^3.9.1", 13 | "gulp-clean": "^0.3.1", 14 | "gulp-cssmin": "^0.1.7", 15 | "gulp-livereload": "^3.8.1", 16 | "gulp-load-plugins": "^1.2.0", 17 | "gulp-rename": "^1.2.2", 18 | "gulp-uglify": "^1.5.1", 19 | "json-config-reader": "^2.0.1", 20 | "karma": "^0.13.21", 21 | "karma-chrome-launcher": "^0.2.2", 22 | "karma-coverage": "^0.5.3", 23 | "karma-mocha": "^0.2.2", 24 | "mocha": "^2.4.5", 25 | "require-dir": "^0.3.2", 26 | "style-loader": "^0.13.1", 27 | "through-gulp": "^0.5.0", 28 | "webpack": "^1.13.2" 29 | }, 30 | "scripts": { 31 | "test": "karma start", 32 | "build": "gulp" 33 | }, 34 | "repository": { 35 | "type": "git", 36 | "url": "git@github.com:BE-FE/iSlider.git" 37 | }, 38 | "keywords": [ 39 | "smooth", 40 | "hybrid", 41 | "mobile", 42 | "performance", 43 | "slide", 44 | "slider", 45 | "animate", 46 | "effect", 47 | "mobile", 48 | "iSlider.js", 49 | "javascript", 50 | "lightweight", 51 | "plug-in", 52 | "easy to expand" 53 | ], 54 | "bugs": { 55 | "url": "https://github.com/BE-FE/iSlider/issues", 56 | "email": "shine.wangrs@gmail.com" 57 | }, 58 | "license": "MIT" 59 | } 60 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 54 | 55 | 56 | 57 |
    58 |
    59 |

    大家好！
    60 | 由于项目需要，使用了 iSlider 2.X, 每页的数据长度不定可能需要滚动，所以按照文档 设置了fixPage:false，
    61 | 但是在左右滑动切换的时候 同时又产生了上下滑动，就会出现下图一样的效果，画面停止不会回弹，导致无法正常使用，
    62 | 请开发组的同志们帮忙看看有什么解决办法吗？谢谢！！（小米手机自带浏览器居然能正常运行没有这个问题）！！！
    63 | 由于项目需要，使用了 iSlider 2.X, 每页的数据长度不定可能需要滚动，所以按照文档 设置了fixPage:false，
    64 | 但是在左右滑动切换的时候 同时又产生了上下滑动，就会出现下图一样的效果，画面停止不会回弹，导致无法正常使用，
    65 | 请开发组的同志们帮忙看看有什么解决办法吗？谢谢！！（小米手机自带浏览器居然能正常运行没有这个问题）！！！
    66 | 由于项目需要，使用了 iSlider 2.X, 每页的数据长度不定可能需要滚动，所以按照文档 设置了fixPage:false，
    67 | 但是在左右滑动切换的时候 同时又产生了上下滑动，就会出现下图一样的效果，画面停止不会回弹，导致无法正常使用，
    68 | 请开发组的同志们帮忙看看有什么解决办法吗？谢谢！！（小米手机自带浏览器居然能正常运行没有这个问题）！！！
    69 | 由于项目需要，使用了 iSlider 2.X, 每页的数据长度不定可能需要滚动，所以按照文档 设置了fixPage:false，
    70 | 但是在左右滑动切换的时候 同时又产生了上下滑动，就会出现下图一样的效果，画面停止不会回弹，导致无法正常使用，
    71 | 请开发组的同志们帮忙看看有什么解决办法吗？谢谢！！（小米手机自带浏览器居然能正常运行没有这个问题）！！！
    72 | qq 20151106184244

    76 |
    77 | 78 | 79 | 80 | 81 | 82 | 83 | 197 | 198 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | require('../build/iSlider.css'); 2 | // require("exports?iSlider!./export-iSlider"); 3 | var iSlider = require("../build/iSlider.js"); 4 | require('../build/iSlider.animate'); 5 | // require('../build/iSlider.plugin.dot'); 6 | // require('../build/iSlider.plugin.button'); 7 | // require('../build/iSlider.plugin.BIZone'); 8 | // require('../build/iSlider.plugin.zoompic'); 9 | 10 | module.exports = iSlider; -------------------------------------------------------------------------------- /src/js/ext/animate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * More animations 3 | * @file animate.js 4 | * @author BE-FE Team 5 | * xieyu33333 xieyu33333@gmail.com 6 | * shinate shine.wangrs@gmail.com 7 | */ 8 | 9 | (function (global, factory) { 10 | /* CommonJS */ 11 | if (typeof require === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) 12 | factory(require('./iSlider')); 13 | /* AMD */ 14 | else if (typeof define === 'function' && define['amd']) 15 | define(['./iSlider'], function (iSlider) { 16 | factory(iSlider); 17 | }); 18 | /* Global */ 19 | else 20 | factory(global['iSlider']); 21 | 22 | })(window ? window : this, function (iSlider) { 23 | 24 | 'use strict'; 25 | 26 | iSlider && iSlider.extend(iSlider._animateFuncs, { 27 | // rotate 28 | rotate: (function () { 29 | function rotate(dom, axis, scale, i, offset, direct) { 30 | var rotateDirect = (axis === 'X') ? 'Y' : 'X'; 31 | 32 | if (this.isVertical) { 33 | offset = -offset; 34 | if (Math.abs(direct) > 1) { 35 | direct = -direct; 36 | } 37 | } 38 | 39 | var outer = dom.parentElement; 40 | iSlider.setStyle(outer, 'perspective', scale * 4); 41 | 42 | dom.style.visibility = 'visible'; 43 | if (direct > 0 && i === 2) { 44 | dom.style.visibility = 'hidden'; 45 | } 46 | if (direct < 0 && i === 0) { 47 | dom.style.visibility = 'hidden'; 48 | } 49 | dom.style.zIndex = i === 1 ? 1 : 0; 50 | 51 | dom.style.cssText += iSlider.styleProp('backface-visibility') + ':hidden;' + iSlider.styleProp('transform-style') + ':preserve-3d;' + 'position:absolute;'; 52 | 53 | // TODO: overflow... I dont understand why there are many differences between ios and desktop. Maybe they have different interpretations of Perspective 54 | iSlider.setStyle(dom, 'transform', 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.889 * scale / 2) + 'px) scale(0.889)'); 55 | } 56 | 57 | rotate.effect = iSlider.styleProp('transform'); 58 | rotate.reverse = true; 59 | return rotate; 60 | })(), 61 | // flip 62 | flip: (function () { 63 | function flip(dom, axis, scale, i, offset, direct) { 64 | if (this.isVertical) { 65 | offset = -offset; 66 | } 67 | 68 | var outer = dom.parentElement; 69 | iSlider.setStyle(outer, 'perspective', scale * 4); 70 | 71 | dom.style.visibility = 'visible'; 72 | if (direct > 0 && i === 2) { 73 | dom.style.visibility = 'hidden'; 74 | } 75 | if (direct < 0 && i === 0) { 76 | dom.style.visibility = 'hidden'; 77 | } 78 | 79 | dom.style.cssText += 'position:absolute;' + iSlider.styleProp('backface-visibility') + ':hidden'; 80 | iSlider.setStyle(dom, 'transform', 'translateZ(' + (scale / 2) + 'px) rotate' + ((axis === 'X') ? 'Y' : 'X') + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)'); 81 | } 82 | 83 | flip.effect = iSlider.styleProp('transform'); 84 | flip.reverse = true; 85 | return flip; 86 | })(), 87 | depth: (function () { 88 | 89 | function depth(dom, axis, scale, i, offset, direct) { 90 | var zoomScale = (4 - Math.abs(i - 1)) * 0.18; 91 | var outer = dom.parentElement; 92 | iSlider.setStyle(outer, 'perspective', scale * 4); 93 | dom.style.zIndex = i === 1 ? 1 : 0; 94 | iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)'); 95 | } 96 | 97 | depth.effect = iSlider.styleProp('transform'); 98 | return depth; 99 | })(), 100 | flow: (function () { 101 | function flow(dom, axis, scale, i, offset, direct) { 102 | var absoluteOffset = Math.abs(offset); 103 | var rotateDirect = (axis === 'X') ? 'Y' : 'X'; 104 | var directAmend = (axis === 'X') ? 1 : -1; 105 | var offsetRatio = Math.abs(offset / scale); 106 | var outer = dom.parentElement; 107 | 108 | iSlider.setStyle(outer, 'perspective', scale * 4); 109 | 110 | if (i === 1) { 111 | dom.style.zIndex = scale - absoluteOffset; 112 | } 113 | else { 114 | dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset : (i - 1) * absoluteOffset; 115 | } 116 | 117 | iSlider.setStyle(dom, 'transform', 'scale(0.7, 0.7) translateZ(' + (offsetRatio * 150 - 150) * Math.abs(i - 1) + 'px)' + 'translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)' + 'rotate' + rotateDirect + '(' + directAmend * (30 - offsetRatio * 30) * (1 - i) + 'deg)'); 118 | } 119 | 120 | flow.effect = iSlider.styleProp('transform'); 121 | return flow; 122 | })(), 123 | card: (function () { 124 | function card(dom, axis, scale, i, offset, direct) { 125 | var absoluteOffset = Math.abs(offset); 126 | var zoomScale = 1; 127 | var z = 1; 128 | 129 | if (absoluteOffset > 0) { 130 | if (i === 1) { 131 | zoomScale = 1 - 0.2 * Math.abs(i - 1) - Math.abs(0.2 * offset / scale).toFixed(6); 132 | z = 0; 133 | } 134 | } else { 135 | if (i !== 1) { 136 | if ((direct > 0 && i === 0) || (direct < 0 && i === 2)) { 137 | zoomScale = 1 - 0.2 * Math.abs(i - 1); 138 | } 139 | z = 0; 140 | } 141 | } 142 | dom.style.zIndex = z; 143 | iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + ((1 + Math.abs(i - 1) * 0.2) * offset + scale * (i - 1)) + 'px)'); 144 | } 145 | 146 | card.effect = iSlider.styleProp('transform'); 147 | return card; 148 | })(), 149 | fade: (function () { 150 | function fade(dom, axis, scale, i, offset, direct) { 151 | dom.style.zIndex = i === 1 ? 1 : 0; 152 | offset = Math.abs(offset); 153 | if (i === 1) { 154 | dom.style.opacity = 1 - (offset / scale); 155 | } else { 156 | dom.style.opacity = offset / scale; 157 | } 158 | } 159 | 160 | fade.effect = 'opacity'; 161 | return fade; 162 | })(), 163 | zoomout: (function () { 164 | var lsn; 165 | 166 | function zoomout(dom, axis, scale, i, offset) { 167 | var z, o, s; 168 | 169 | var oa = offset / scale; 170 | switch (i) { 171 | case 0: 172 | lsn && window.clearTimeout(lsn); 173 | o = oa < 1 ? oa : 1; 174 | s = 2 - (0.5 * oa); 175 | z = 2; 176 | var at = parseInt(window.getComputedStyle(dom)[iSlider.styleProp('transitionDuration', 1)]) * 1000; 177 | if (at > 0) { 178 | lsn = window.setTimeout(function () { 179 | dom.style.zIndex = 0; 180 | }, at); 181 | } 182 | break; 183 | case 1: 184 | o = 1 - oa; 185 | s = 1 - (0.5 * oa); 186 | z = 1; 187 | break; 188 | case 2: 189 | o = oa > 0 ? oa : 0; 190 | s = 0.5 - (0.5 * oa); 191 | z = 0; 192 | break; 193 | } 194 | dom.style.cssText += 'z-index:' + z + ';opacity:' + o + ';' + iSlider.styleProp('transform') + ':scale(' + s + ');'; 195 | } 196 | 197 | zoomout.reverse = true; 198 | return zoomout; 199 | })() 200 | }); 201 | }); -------------------------------------------------------------------------------- /src/js/plugins/BIZone.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Boundary Identification Zone 3 | * 4 | * @file BIZone.js 5 | * @author BE-FE Team 6 | * shinate shine.wangrs@gmail.com 7 | */ 8 | 9 | (function (global, factory) { 10 | /* CommonJS */ 11 | if (typeof require === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) 12 | factory(require('islider.js')); 13 | /* AMD */ 14 | else if (typeof define === 'function' && define['amd']) 15 | define(['islider.js'], function (iSlider) { 16 | factory(iSlider); 17 | }); 18 | /* Global */ 19 | else 20 | factory(global['iSlider']); 21 | 22 | })(window ? window : this, function (iSlider) { 23 | 24 | 'use strict'; 25 | 26 | iSlider && iSlider.regPlugin('BIZone', function (opts) { 27 | 28 | var HANDLE = this; 29 | var zoneSize = parseZone(opts.size || 0); 30 | var device = this.deviceEvents; 31 | var outer = HANDLE.outer; 32 | 33 | var range = initRange(); 34 | 35 | function parseZone(sizes) { 36 | if (typeof sizes === 'number') { 37 | if (sizes < 0) { 38 | sizes = 0; 39 | } 40 | return [sizes, sizes, sizes, sizes]; 41 | } else if (sizes instanceof Array) { 42 | switch (sizes.length) { 43 | case 4: 44 | return sizes; 45 | case 3: 46 | return [sizes[0], sizes[1], sizes[2], sizes[1]]; 47 | case 2: 48 | return [sizes[0], sizes[1], sizes[0], sizes[1]]; 49 | case 1: 50 | return [sizes[0], sizes[0], sizes[0], sizes[0]]; 51 | } 52 | } 53 | 54 | return [0, 0, 0, 0]; 55 | } 56 | 57 | function initRange() { 58 | var docEl = outer.ownerDocument.documentElement; 59 | var box = {top: 0, left: 0}; 60 | if (typeof outer.getBoundingClientRect !== 'undefined') { 61 | box = outer.getBoundingClientRect(); 62 | } 63 | 64 | var top = box.top + ( window.pageYOffset || docEl.scrollTop ) - ( docEl.clientTop || 0 ); 65 | var left = box.left + ( window.pageXOffset || docEl.scrollLeft ) - ( docEl.clientLeft || 0 ); 66 | 67 | return [ 68 | top, // top 69 | left + outer.offsetWidth, // right 70 | top + outer.offsetHeight, // bottom 71 | left // left 72 | ]; 73 | } 74 | 75 | if (zoneSize.filter(function (i) { 76 | return i > 0; 77 | }).length > 0) { 78 | HANDLE.on('slide', function (evt) { 79 | var finger = device.hasTouch ? evt.targetTouches[0] : evt; 80 | var pos = [finger.pageY, finger.pageX, finger.pageY, finger.pageX]; 81 | for (var i = 0; i < 4; i++) { 82 | if (Math.abs(pos[i] - range[i]) < zoneSize[i]) { 83 | this.endHandler(new Event(device.endEvt)); 84 | break; 85 | } 86 | } 87 | }); 88 | } 89 | }); 90 | }); -------------------------------------------------------------------------------- /src/js/plugins/button.js: -------------------------------------------------------------------------------- 1 | /** 2 | * To create right&left botton on iSlider 3 | * 4 | * @file button.js 5 | * @author BE-FE Team 6 | * xieyu33333 xieyu33333@gmail.com 7 | * shinate shine.wangrs@gmail.com 8 | */ 9 | 10 | (function (global, factory) { 11 | /* CommonJS */ 12 | if (typeof require === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) 13 | factory(require('islider.js')); 14 | /* AMD */ 15 | else if (typeof define === 'function' && define['amd']) 16 | define(['islider.js'], function (iSlider) { 17 | factory(iSlider); 18 | }); 19 | /* Global */ 20 | else 21 | factory(global['iSlider']); 22 | 23 | })(window ? window : this, function (iSlider) { 24 | 25 | 'use strict'; 26 | 27 | iSlider && iSlider.regPlugin('button', function () { 28 | var HANDLE = this; 29 | var btnOuter = []; 30 | var btnInner = []; 31 | for (var i = 0; i < 2; i++) { 32 | btnOuter[i] = document.createElement('div'); 33 | btnOuter[i].className = 'islider-btn-outer'; 34 | btnInner[i] = document.createElement('div'); 35 | btnInner[i].className = 'islider-btn-inner'; 36 | 37 | if (i === 0) { 38 | btnOuter[i].className += ' left'; 39 | btnOuter[i].dir = -1; 40 | } 41 | else { 42 | btnOuter[i].className += ' right'; 43 | btnOuter[i].dir = 1; 44 | } 45 | 46 | btnOuter[i].addEventListener('click', function () { 47 | var dir = parseInt(this.getAttribute('dir'), 10); 48 | HANDLE.slideTo(HANDLE.slideIndex + dir); 49 | }); 50 | 51 | btnOuter[i].appendChild(btnInner[i]); 52 | HANDLE.wrap.appendChild(btnOuter[i], HANDLE.wrap.nextSibling); 53 | } 54 | }); 55 | }); 56 | -------------------------------------------------------------------------------- /src/js/plugins/dot.js: -------------------------------------------------------------------------------- 1 | /** 2 | * To create dots index on iSlider 3 | * 4 | * @file dot.js 5 | * @author BE-FE Team 6 | * xieyu33333 xieyu33333@gmail.com 7 | * shinate shine.wangrs@gmail.com 8 | * @Instructions 9 | * activation: 10 | * new iSlider({ 11 | * ... 12 | * plugins: ['dot'] 13 | * ... 14 | * }); 15 | * more options: 16 | * new iSlider({ 17 | * ... 18 | * plugins: [['dot', {locate:'absoulute'}]] 19 | * ... 20 | * }); 21 | * @options 22 | * locate {string|HTML Element} the warpper of dots value: 'absolute', 'relative' or Specified dom, default: 'absolute' 23 | */ 24 | 25 | (function (global, factory) { 26 | /* CommonJS */ 27 | if (typeof require === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) 28 | factory(require('islider.js')); 29 | /* AMD */ 30 | else if (typeof define === 'function' && define['amd']) 31 | define(['islider.js'], function (iSlider) { 32 | factory(iSlider); 33 | }); 34 | /* Global */ 35 | else 36 | factory(global['iSlider']); 37 | 38 | })(window ? window : this, function (iSlider) { 39 | 40 | 'use strict'; 41 | 42 | iSlider && iSlider.regPlugin('dot', function (opts) { 43 | 44 | 45 | var HANDLE = this; 46 | var data = HANDLE.data; 47 | var dots = []; 48 | var evtHandle = []; 49 | var endEvt = HANDLE.deviceEvents.endEvt; 50 | 51 | var dotWrap = document.createElement('ul'); 52 | dotWrap.className = 'islider-dot-wrap'; 53 | 54 | renderDots(); 55 | 56 | locate(opts && opts.locate != null ? opts.locate : false) 57 | .appendChild(dotWrap); 58 | 59 | HANDLE.on('slideChange', function () { 60 | for (var i = 0; i < data.length; i++) { 61 | dots[i].className = 'islider-dot'; 62 | if (i === this.slideIndex) { 63 | dots[i].className += ' active'; 64 | } 65 | } 66 | }); 67 | 68 | HANDLE.on('loadData', function () { 69 | data = this.data; 70 | renderDots(); 71 | }, 1); 72 | 73 | function renderDots() { 74 | var fragment = document.createDocumentFragment(); 75 | dots.forEach(function (el, i) { 76 | el.removeEventListener(endEvt, evtHandle[i], false); 77 | }); 78 | dots = [], evtHandle = []; 79 | dotWrap.innerHTML = ''; 80 | for (var i = 0; i < data.length; i++) { 81 | dots[i] = document.createElement('li'); 82 | dots[i].className = 'islider-dot'; 83 | dots[i].setAttribute('index', i); 84 | if (i === HANDLE.slideIndex) { 85 | dots[i].className += ' active'; 86 | } 87 | evtHandle[i] = function () { 88 | HANDLE.slideTo(parseInt(this.getAttribute('index'), 10)); 89 | }; 90 | dots[i].addEventListener(endEvt, evtHandle[i], false); 91 | fragment.appendChild(dots[i]); 92 | } 93 | dotWrap.appendChild(fragment); 94 | } 95 | 96 | function locate(locate) { 97 | if (locate === 'relative') { 98 | return HANDLE.wrap; 99 | } else if (Boolean(locate.nodeName) && Boolean(locate.nodeType)) { 100 | return locate; 101 | } 102 | return HANDLE.wrap.parentNode; 103 | } 104 | }); 105 | }); 106 | -------------------------------------------------------------------------------- /src/style/iSlider.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file iSlider.css 3 | */ 4 | 5 | /** 6 | * =========================== 7 | * iSlider 8 | * =========================== 9 | */ 10 | .islider-outer { 11 | display: block; 12 | position: relative; 13 | list-style: none; 14 | margin: 0; 15 | padding: 0; 16 | height: 100%; 17 | width: 100%; 18 | overflow: hidden; 19 | } 20 | 21 | .islider-outer > li { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | margin: 0; 26 | padding: 0; 27 | width: 100%; 28 | height: 100%; 29 | list-style: none; 30 | overflow: hidden; 31 | display: -moz-box; 32 | display: -webkit-box; 33 | display: box; 34 | -moz-box-pack: center; 35 | -webkit-box-pack: center; 36 | box-pack: center; 37 | -moz-box-align: center; 38 | -webkit-box-align: center; 39 | box-align: center; 40 | } 41 | 42 | .islider-img > img { 43 | max-width: 100%; 44 | max-height: 100%; 45 | } 46 | 47 | .islider-sliding { 48 | z-index: 0; 49 | } 50 | 51 | .islider-sliding-focus { 52 | z-index: 1; 53 | } 54 | 55 | /** 56 | * =========================== 57 | * iSlider.plugin.button 58 | * =========================== 59 | */ 60 | .islider-btn-outer { 61 | position: absolute; 62 | width: 3em; 63 | height: 3em; 64 | cursor: pointer; 65 | top: 0; 66 | bottom: 0; 67 | margin: auto 0; 68 | display: block; 69 | background-color: #777777; 70 | } 71 | 72 | .islider-btn-outer.left { 73 | left: 5%; 74 | } 75 | 76 | .islider-btn-outer.right { 77 | right: 5%; 78 | } 79 | 80 | .islider-btn-inner { 81 | position: absolute; 82 | width: 50%; 83 | height: 50%; 84 | border-top: 2px solid #ffffff; 85 | border-left: 2px solid #ffffff; 86 | margin: auto; 87 | top: 0; 88 | bottom: 0; 89 | left: 0; 90 | right: 0; 91 | } 92 | 93 | .islider-btn-outer.left > .islider-btn-inner { 94 | -webkit-transform: rotate(-45deg); 95 | -moz-transform: rotate(-45deg); 96 | -ms-transform: rotate(-45deg); 97 | -o-transform: rotate(-45deg); 98 | transform: rotate(-45deg); 99 | } 100 | 101 | .islider-btn-outer.right > .islider-btn-inner { 102 | -webkit-transform: rotate(135deg); 103 | -moz-transform: rotate(135deg); 104 | -ms-transform: rotate(135deg); 105 | -o-transform: rotate(135deg); 106 | transform: rotate(135deg); 107 | } 108 | 109 | /** 110 | * =========================== 111 | * iSlider.plugin.dot 112 | * =========================== 113 | */ 114 | .islider-dot-wrap { 115 | width: 80%; 116 | height: 10%; 117 | margin: 0 auto; 118 | position: absolute; 119 | padding: 0; 120 | left: 0; 121 | right: 0; 122 | bottom: 0; 123 | z-index: 10000; 124 | text-align: center; 125 | } 126 | 127 | .islider-dot { 128 | position: relative; 129 | display: inline-block; 130 | width: 0.8em; 131 | height: 0.8em; 132 | border-radius: 50%; 133 | border: 1px solid #ffffff; 134 | list-style: none; 135 | margin: 5px; 136 | } 137 | 138 | .islider-dot.active { 139 | background-color: #ffffff; 140 | } -------------------------------------------------------------------------------- /test/iSlider.test.js: -------------------------------------------------------------------------------- 1 | describe('iSlider-create', function () { 2 | var DATA = []; 3 | for (var i = 0; i < 7; i++) { 4 | DATA.push({ 5 | content: '//be-fe.github.io/static/images/saber/' + i + '.jpg' 6 | }); 7 | } 8 | 9 | var anims = iSlider._animateFuncs; 10 | for (var type in anims) { 11 | if (anims.hasOwnProperty(type)) { 12 | var container = document.createElement('div'); 13 | document.body.appendChild(container); 14 | new iSlider(container, DATA, { 15 | animateType: type, 16 | isLooping: 1, 17 | isOverspread: 1, 18 | isAutoplay: 1, 19 | animateTime: 2000, 20 | duration: 2000, 21 | plugins: [ 22 | ['dot', {locate: 'relative'}], 23 | 'button', 24 | ['zoompic', {zoomFactor: 2}], 25 | ['BIZone', {'size': 20}] 26 | ] 27 | }); 28 | } 29 | } 30 | }); -------------------------------------------------------------------------------- /thumbnails/iSlider-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-fe/iSlider/4d76b636b992f59cbedf55af60191331cc16e04d/thumbnails/iSlider-logo.png -------------------------------------------------------------------------------- /thumbnails/qrcode-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-fe/iSlider/4d76b636b992f59cbedf55af60191331cc16e04d/thumbnails/qrcode-home.png -------------------------------------------------------------------------------- /thumbnails/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-fe/iSlider/4d76b636b992f59cbedf55af60191331cc16e04d/thumbnails/qrcode.png --------------------------------------------------------------------------------