update - 1.1 -

lipten · Mar 12, 2016 · 8dd79f9 · 8dd79f9
1 parent 3253754
commit 8dd79f9
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 148 deletions.
diff --git a/README.md b/README.md
@@ -1,22 +1,17 @@
 # slidePage
 Demo:http://lipten.link/projects/slidePage/demo.html?page=1
 
-###-update v0.6.2-
-1.全面支持jquery和zepto！
-
-2.将zepto-touch.js改造了一下，使jquery也能以同样的方式调用触屏事件;
-
-3.将改造后的zepto-touch.js取名为slidePage-touch.js,并与主文件合并压缩成slidePage.min.js
-
+###-update v1.1-
+1.正式版之后的改版，为了在避免在项目中遇到UI组件混乱，实现清晰的功能划分，废除了一些绑定html结构的功能（分页组件、音乐组件）
 
-###-update v0.6-
-1.加入了分页组件。
+2.初始化方法的参数开出多两个回调函数（next和prev）,可以自由的做二次开发，demo中利用这两个回调和methon实现了分页组件，下面有详细说明这两个参数。
 
-2.开放了三个方法：slidePage.index()、slidePage.next()和slidePage.prev(),详情见文档;
 
+###-update v1.0-
+1.正式版，从0.6.2版本修复稳定。
 
 
-###安装方法
+###Usage
 
 ####1、下载slidePage
 利用bower安装
@@ -38,7 +33,7 @@ git clone https://github.com/lipten/slidePage.git
 ####3、引用js文件
 ```
 <script src="//cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>  //zepto.js或者jquery类库
-<script type="text/javascript" src="slidePage.js"></script>         //slidePage主文件，支持手机和PC浏览
+<script type="text/javascript" src="slidePage.min.js"></script>         //slidePage主文件，支持手机和PC浏览
                                                                     
 ```
 
@@ -65,36 +60,36 @@ git clone https://github.com/lipten/slidePage.git
 slidePage.init();
 ```
 
-## Doc
-slidePage.init(options);
-
-options:(default)
+## Configuration
 
 <pre>
-{
+slidePage.init({
     'index' : 1,
     'before' : function(index){},
     'after' : function(index){},
+    'next' : function(index){},
+    'prev' : function(index){},
     'speed' : 700
     'refresh'  : true,
     'useWheel' : true,
     'useKeyboard' : true,
     'useArrow' : true,
     'useAnimation' : true,
-    'pagination': true,
-    'useMusic' : {
-        'autoPlay' : true,
-        'loopPlay' : true,
-        'src' : 'Summer.mp3'
-    }
- };
+ });
 </pre>
+
+
+##Options
 ####index
 初始进入的索引页面，值为1时从第一页开始，默认为1
 ####before
-触发页面滚动前的回调，参数index为滚动前的页面索引号
+触发页面滚动前的回调，参数index为滚动前的页面序号
 ####after
-触发页面滚动后的回调，参数index为滚动后的页面索引号
+触发页面滚动后的回调，参数index为滚动后的页面序号
+####next
+监听滚动下一页，参数index为滚动前的页面序号
+####prev
+监听滚动上一页，参数index为滚动前的页面序号
 ####speed
 页面过渡的动画时间，以毫秒为单位
 ####refresh
@@ -107,10 +102,8 @@ options:(default)
 使用自带样式的下箭头提示图标
 ####useAnimation
 开启或关闭动画
-####useMusic
-使用音乐，并有音乐图标提示用户控制播放(不使用直接赋值false)
 
-###使用动画
+###Using Animation
 <pre>
 &lt;div class="step slideRight" data-delay="1300"&gt;&lt;/div&gt;
 </pre>
@@ -152,7 +145,22 @@ pageIndex传入一个正整数作为页码跳转到指定页面(从1开始),不
 
 ========
 
-##更新历史
+##History
+
+###-update v0.6.2-
+1.全面支持jquery和zepto！
+
+2.将zepto-touch.js改造了一下，使jquery也能以同样的方式调用触屏事件;
+
+3.将改造后的zepto-touch.js取名为slidePage-touch.js,并与主文件合并压缩成slidePage.min.js
+
+
+###-update v0.6-
+1.加入了分页组件。
+
+2.开放了三个方法：slidePage.index()、slidePage.next()和slidePage.prev(),详情见文档;
+
+
 
 ###-update v0.5.2-
 1.html结构有所改变：滚动的父容器除了加"slidePage-container"的class样式外还要加多个"slidePage-container"的id

diff --git a/demo.html b/demo.html
@@ -27,6 +27,72 @@
             list-style: none;
         }
 
+
+
+        .prev-page,.next-page{
+            display: block;
+            width: 25px;
+            height: 25px;
+            line-height: 26px;
+            position: absolute;
+            right: 2px;
+            z-index: 9999;
+            background: rgba(255,255,255,.5);
+            border-radius: 50%;
+            font-size: 14px;
+            color: #666;
+            text-align:center;
+        }
+
+        .prev-page{
+            top: 0;
+        }
+        .next-page{
+            bottom: 0;
+        }
+        .prev-page:active{
+            background: rgba(155,155,155,.5);
+        }
+        .next-page:active{
+            background: rgba(155,155,155,.5);
+        }
+        .pagination{
+            width: 30px;
+            height: auto;
+            position: fixed;
+            top: 50%;
+            right: 5px;
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            padding: 40px 0;
+            margin-top: -150px;
+        }
+        .pagination a{
+            width: 25px;
+            height: 25px;
+            display: block;
+            line-height: 28px;
+            text-align: center;
+            padding-left: 3px;
+        }
+        .pagination a:after{
+            content: "";
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            display: inline-block;
+            background: rgba(0,0,0,.5);
+            -webkit-transition: background .3s ease;
+            -moz-transition: background .3s ease;
+            -ms-transition: background .3s ease;
+            -o-transition: background .3s ease;
+            transition: background .3s ease;
+        }
+        .pagination a.active:after{
+            background: rgba(255,255,255,.5);
+        }
+
         .item1 {
             background-color: #99CC33;
         }
@@ -239,7 +305,7 @@ <h2>Page6</h2>
     </div>
 
     <!--通过slidePage.prev()、slidePage.next()和slidePage.index()可以对页面跳转操作，可以自定义分页组件-->
-    <!--<nav class="pagination" id="pagination">
+    <nav class="pagination" id="pagination">
         <div class="prev-page" onclick="slidePage.prev()">&Lambda;</div>
         <a onclick="slidePage.index(1)"></a>
         <a onclick="slidePage.index(2)"></a>
@@ -248,26 +314,31 @@ <h2>Page6</h2>
         <a onclick="slidePage.index(5)"></a>
         <a onclick="slidePage.index(6)"></a>
         <div class="next-page" onclick="slidePage.next()">V</div>
-    </nav>-->
+    </nav>
 </div>
-<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
+<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
 <script type="text/javascript" src="slidePage.min.js"></script>
 
 <script type="text/javascript">
+    $('#pagination').find('a').eq(0).addClass('active')
     slidePage.init({
         /*'index': 1,*/
-        'before': function (index) {
-            console.log('before current page ' + index)
+        'before':function(index){
+            console.log(index)
+        },
+        'next': function(index){
+            $('#pagination').find('a').removeClass('active').eq(index).addClass('active')
         },
-        'after': function (index) {
-            console.log('after current page ' + index)
+        'prev': function(index){
+            $('#pagination').find('a').removeClass('active').eq(index-1).addClass('active')
         },
         'useArrow': true,
         'useAnimation': true,
         'refresh': true,
         'speed': false,
-        'pagination': true,//要自定义分页组件的话该属性应为false，否则会插入自带分页组件
     });
+
+
 </script>
 </body>
 </html>
diff --git a/slidePage.css b/slidePage.css
@@ -89,67 +89,6 @@
 }
 
 
-.prev-page,.next-page{
-    display: block;
-    width: 25px;
-    height: 25px;
-    line-height: 26px;
-    position: absolute;
-    right: 2px;
-    z-index: 9999;
-    background: rgba(255,255,255,.5);
-    border-radius: 50%;
-    font-size: 14px;
-    color: #666
-}
-
-.prev-page{
-    top: 0;
-}
-.next-page{
-    bottom: 0;
-}
-.prev-page:active{
-    background: rgba(155,155,155,.5);
-}
-.next-page:active{
-    background: rgba(155,155,155,.5);
-}
-.pagination{
-    width: 30px;
-    height: auto;
-    position: fixed;
-    top: 50%;
-    right: 5px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 40px 0;
-}
-.pagination a{
-    width: 25px;
-    height: 25px;
-    display: block;
-    line-height: 28px;
-    text-align: center;
-    padding-left: 3px;
-}
-.pagination a:after{
-    content: "";
-    width: 15px;
-    height: 15px;
-    border-radius: 50%;
-    display: inline-block;
-    background: rgba(0,0,0,.5);
-    -webkit-transition: background .3s ease;
-    -moz-transition: background .3s ease;
-    -ms-transition: background .3s ease;
-    -o-transition: background .3s ease;
-    transition: background .3s ease;
-}
-.pagination a.active:after{
-    background: rgba(255,255,255,.5);
-}
 
 @keyframes fadeInUp{
     0%{