3.3.1

ximan · Apr 27, 2015 · 670b352 · 670b352
2 parents fe38afb + a837854
commit 670b352
Show file tree

Hide file tree

Showing 21 changed files with 1,480 additions and 952 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+*.DS_Store
diff --git a/Changelog.md b/Changelog.md
@@ -0,0 +1,59 @@
+### 3.3.1(150427)
+
+* 修复只有1个轮播时不执行lazyLoad和callback
+
+### 3.3.0(150424)
+
+* 增加轮播初始值index参数
+* 修复点击触发轮播滚动
+
+### 3.2.1(150331)
+
+* 优化滑动时禁止另外一个方向的滑动事件
+
+### 3.2.0(150322)
+
+* 增加回调callback方法sum参数
+* 修复连续滚动时只滚动一轮bug
+
+### 3.1.0(150313)
+
+* 支持指定索引值方法、前一屏、后一屏轮播
+* 修复一屏内多图懒加载bug
+
+### 3.0.0(150227)
+
+* 重构js
+* 支持resize
+* 修改回调callback写法（废弃掉原来的callback写法）
+
+### 2.2.1(150130)
+
+* 优化懒加载时js阻塞导致轮播图片无法显示
+
+### 2.2(150112)
+
+* 修复Chrome模拟器touch变鼠标后js报错
+* 修复只有1个轮播时禁止自动切换
+
+### 2.1(150105)
+
+* 支持Windows Phone
+
+### 2.0(141007)
+
+* 支持选择连续滚动
+* 支持选择滚动轴
+* 增加过渡效果（cubic-bezier）
+
+### 1.1(140930)
+
+* 支持Zepto精简版或jQuery 2.x库，去掉Zepto Touch模块依赖
+* 增加图片跟手滑动
+* 改善部分Android浏览器滑动卡顿
+
+### 1.0(140905)
+
+* 支持选择自动或手动切换
+* 支持改变切换速度
+* 支持图片懒加载
diff --git a/README.md b/README.md
@@ -0,0 +1,64 @@
+# swipeSlide for Zepto/jQuery Plugin
+
+## 简介
+
+移动端（基于Zepto/jQuery）的轮播插件：<http://ons.me/500.html>
+
+## 示例
+
+![扫一扫](website.png)
+[DEMO1链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/index.html)
+
+![扫一扫](website-pic.png)
+[DEMO2链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/full-screen-pic.html)
+
+![扫一扫](website-text.png)
+[DEMO3链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/full-screen-text.html)
+
+![扫一扫](website-switch.png)
+[DEMO4链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/index-switch.html)
+
+## 依赖
+
+Zepto 或者 jQuery
+
+## 使用方法
+
+````
+$('.element').swipeSlide({
+    // 参数
+});
+````
+
+## 参数列表
+
+|       参数        |   说明   |  默认值 |      可填值     |
+|------------------|----------|--------|----------------|
+| ul               | 父dom    | ul     | .element的子dom |
+| li               | 子dom    | li     | ul的子dom       |
+| index            | 轮播初始值 | 0     | 数字       |
+| continuousScroll | 连续滚动   | false | true和false |
+| autoSwipe        | 自动切换   | true  | true和false |
+| speed            | 切换速度   | 4000  | 数字        |
+| axisX            | X轴滚动   | true   | true和false |
+| transitionType   | 过渡类型   | ease  | linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier |
+| lazyLoad         | 图片懒加载 | false | true和false |
+| callback         | 回调方法   | 空    | function(i,sum){}（i为索引值，sum为总和） |
+
+## API
+
+暴露一些功能，可以让swipeSlide更灵活的使用
+
+`goTo(num)` 指定轮播，详见[DEMO4代码](index-switch.html)
+
+## 最新版本
+
+### 3.3.1(150427)
+
+* 修复只有1个轮播时不执行lazyLoad和callback
+
+[所有更新日志](Changelog.md)
+
+## 缺点
+
+只能固定高度或者成比例宽度，无法自适应高度。
diff --git a/bower.json b/bower.json
@@ -0,0 +1,32 @@
+{
+  "name": "swipeSlide",
+  "version": "2.2.1",
+  "homepage": "https://github.com/ximan/swipeSlide",
+  "authors": [
+    "ximan"
+  ],
+  "description": "移动端轮播图（基于Zepto/jQuery）",
+  "main": "js/swipeSlide.min.js",
+  "keywords": [
+    "jquery",
+    "zepto",
+    "slide",
+    "scroll"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "js/jquery.min.js",
+    "js/zepto.min.js",
+    "website-pic.png",
+    "website-text.png",
+    "website.png",
+    ".gitignore",
+    "full-screen-pic.html",
+    "full-screen-text.html",
+    "index.html",
+    "README.md"
+  ]
+}
diff --git a/comment-thumbnails.html b/comment-thumbnails.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="initial-scale=1, user-scalable=0" charset="UTF-8">
+    <title>swipeSlide</title>
+<style>
+*{
+    margin: 0;
+    padding: 0;
+    /* 防止点击闪烁 */
+    -webkit-tap-highlight-color:rgba(0,0,0,0);
+    /* 缩放网页，文字大小不变 */
+    -webkit-text-size-adjust:none;
+}
+body{
+    font-size: 14px;
+}
+h1{
+    font-size: 16px;
+}
+h2{
+    font-size: 14px;
+}
+h3{
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    font-size: 14px;
+}
+.comment{
+    min-width: 320px;
+}
+.comment .item{
+    padding: 10px;
+    border-bottom:1px solid #ccc;
+}
+.comment .item:first-child{
+    border-top:1px solid #ccc;
+}
+.comment .item p{
+    line-height: 18px;
+    color: #333;
+    font-size: 12px;
+}
+.comment .thumbnails:after{
+  content: "";
+  display: table;
+  clear: both;
+}
+.comment .thumbnails img{
+    float: left;
+    width: 50px;
+    height: 50px;
+    margin: 10px 10px 0 0;
+    border: 1px solid #ccc;
+}
+
+.slide_box{
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 8;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+}
+.slide{
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width:100%;
+    max-width: 640px;
+    overflow: hidden;
+    -webkit-transform:translate(0,-50%);
+    transform:translate(0,-50%)
+}
+.slide:after{
+    content: '';
+    display: block;
+    width: 100%;
+    padding-top: 100%;
+}
+.slide ul{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+.slide li{
+    list-style: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+/* 解决js阻塞页面显示首屏 */
+.slide li:first-child{
+    z-index: 1;
+}
+.slide li img{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+.btn_close{
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 50%;
+    font-size: 20px;
+    font-family: Arial;
+    text-align: center;
+    color: #fff;
+    background-color: rgba(255,0,0,.5);
+}
+.num_box{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+    background-color: #eee;
+    text-align: center;
+    font-size: 14px;
+}
+</style>
+</head>
+<body>
+<h1><a href="http://ons.me/" target="_blank" title="一个热爱网络的年轻人的博客">西门的后花园</a></h1>
+<h2><a href="http://ons.me/500.html" target="_blank">swipeSlide for Zepto/jQuery Plugin，移动端（基于Zepto/jQuery）的轮播插件</a></h2>
+
+<h3>用户评价</h3>
+<div class="comment">
+    <div class="item">
+        <p>选了很久选定的，色彩亮丽，无瑕疵，初始激活是机子很烫，持续了一段时间，致电苹果售后咨询，态度很好，说这个现象是正常的，别人也提出过，之后使用就不会出现了。之后使用5天，均未再出现此状况，持续关注。</p>
+        <div class="thumbnails">
+            <img src="http://d11.yihaodianimg.com/N06/M0A/14/F2/ChEbu1UaXLeAIgkhAAoO3HXLIFs70100_100x100.jpg" alt="">
+            <img src="http://d10.yihaodianimg.com/N07/M06/0D/BB/ChEbvFUWXNGAWqyLAAEtO6b0wTo28900_100x100.jpg" alt="">
+            <img src="http://d11.yihaodianimg.com/V00/M0B/D6/F4/CgQDsFUtIeqAE4nfAAA4zfW_EGQ80800_100x100.jpg" alt="">
+        </div>
+    </div>
+    <div class="item">
+        <p>买了一箱很不错啦 很喜欢 还买了10包 这个 奥尔良味道能淡一点 烤肉味道 好吃呢 可喜欢啦 边评论边流口水了。。。</p>
+        <div class="thumbnails">
+            <img src="http://d11.yihaodianimg.com/N07/M03/43/7D/ChEbvFUzItKAanahAADnedOSpf828300_100x100.jpg" alt="">
+            <img src="http://d11.yihaodianimg.com/V00/M08/AC/24/CgQDsFUmhhCAMBYvAAGjDtmMdMg04300_100x100.jpg" alt="">
+            <img src="http://d11.yihaodianimg.com/V00/M00/AC/ED/CgQDslTz7tCAS1hBAAITpIw-S4U98700_100x100.jpg" alt="">
+            <img src="http://d10.yihaodianimg.com/V00/M03/40/CA/CgQDsFTIwrWAQJjXAAqRYfotQYM41800_100x100.jpg" alt="">
+            <img src="http://d11.yihaodianimg.com/N06/M02/61/C5/CgQIzVUzItKAGce6AADjzCMGwkM66600_100x100.jpg" alt="">
+        </div>
+    </div>
+</div>
+
+<div class="slide_box">
+    <span class="btn_close">×</span>
+    <div class="num_box">
+        <span class="num"></span>/<span class="sum"></span>
+    </div>
+</div>
+
+<script src="js/zepto.min.js"></script>
+<!-- <script src="js/jquery.min.js"></script> -->
+<script src="js/swipeSlide.min.js"></script>
+<script>
+$(function(){
+    $('.comment .thumbnails img').on('click',function(){
+        var $this = $(this);
+        var _result = '';
+        var _index = $this.index();
+        // 拼接swipeSlide字符串
+        _result += '<div class="slide"><ul>';
+        $this.parents('.thumbnails').find('img').each(function(i){
+            var _src = $(this).attr('src');
+            _result += '<li><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="' + _src.substring(0,_src.lastIndexOf('_')) + '_640x640.jpg"></li>';
+        });
+        _result += '</ul></div>';
+        $('.slide_box').show();
+        $('.slide_box').prepend(_result);
+
+        // swipeSlide
+        $('.slide').swipeSlide({
+            index : _index,
+            continuousScroll : true,
+            autoSwipe : false,
+            lazyLoad : true,
+            callback : function(i,sum){
+                $('.num_box .num').text(i+1);
+                $('.num_box .sum').text(sum);
+            }
+        });
+    });
+
+    // 关闭按钮
+    $('.btn_close').on('click',function(){
+        $('.slide').remove();
+        $('.slide_box').hide();
+    });
+});
+</script>
+</body>
+</html>