Skip to content

Commit

Permalink
3.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@ximan
ximan committed Mar 13, 2015
1 parent fe6c1ad commit e9bfda1
Show file tree
Hide file tree
Showing 5 changed files with 230 additions and 24 deletions.
5 changes: 5 additions & 0 deletions Changelog.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
### 3.1.0(150313)

* 支持指定索引值、前一屏、后一屏轮播
* 修复一屏内多图懒加载bug

### 3.0.0(150227)

* 重构js
Expand Down
7 changes: 3 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,9 @@ Zepto 或者 jQuery

## 最新版本

### 3.0.0(150227)
### 3.1.0(150313)

* 重构js
* 支持resize
* 修改回调callback写法
* 支持指定索引值、前一屏、后一屏轮播
* 修复一屏内多图懒加载bug

[所有更新日志](Changelog.md)
175 changes: 174 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
/* 缩放网页，文字大小不变 */
-webkit-text-size-adjust:none;
}
body{
font-size: 14px;
}
h1{
font-size: 16px;
}
Expand All @@ -22,7 +25,7 @@
position: relative;
max-width: 640px;
overflow: hidden;
margin: 10px auto;
margin: 20px auto;
}
.slide:after{
content: '';
Expand Down Expand Up @@ -78,6 +81,81 @@
#slide1{
width: 320px;
}

/* demo4 */
.slide_tab{
margin: 20px auto;
border-bottom: 1px solid #ccc;
}
.slide_tab .tab_box{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 44px;
line-height: 44px;
background-color: #aaa;
text-align: center;
color: #fff;
}
.slide_tab .btn_left,.slide_tab .btn_right{
width: 50px;
}
.slide_tab .tab{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.slide_tab .tab span{
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.slide_tab .tab .cur{
background-color: #fff;
color: #333;
}
.slide_tab .product_box{
position: relative;
overflow: hidden;
margin: 0;
}
.slide_tab .product_box:after{
padding-top: 100%;
}
.slide_tab .product_box li:after{
content:'';
display:table;
clear:both;
}
.slide_tab .product_box .pic{
position: relative;
float: left;
width: 50%;
box-sizing: border-box;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.slide_tab .product_box .pic:after{
content: '';
display: block;
width: 100%;
padding-top: 100%;
}
.slide_tab .product_box .pic img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -175,19 +253,95 @@ <h2><a href="http://ons.me/500.html" target="_blank">swipeSlide for Zepto/jQuery
</div>
</div>

<div class="slide_tab">
<div class="tab_box">
<span class="btn_left">左</span>
<div class="tab">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
</div>
<span class="btn_right">右</span>
</div>
<div class="product_box slide">
<ul>
<li>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d8.yihaodianimg.com/V00/M0A/75/FD/CgQDslQ3umKAIwpLAAOJQbKq0pg46901_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d8.yihaodianimg.com/V00/M0A/75/FD/CgQDslQ3umKAIwpLAAOJQbKq0pg46901_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d8.yihaodianimg.com/V00/M0A/75/FD/CgQDslQ3umKAIwpLAAOJQbKq0pg46901_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d8.yihaodianimg.com/V00/M0A/75/FD/CgQDslQ3umKAIwpLAAOJQbKq0pg46901_300x300.jpg" alt="">
</a>
</li>
<li>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d9.yihaodianimg.com/N05/M00/24/DF/CgQI0lQ3umiAYat_AAMa5tG_TXY20001_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d9.yihaodianimg.com/N05/M00/24/DF/CgQI0lQ3umiAYat_AAMa5tG_TXY20001_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d9.yihaodianimg.com/N05/M00/24/DF/CgQI0lQ3umiAYat_AAMa5tG_TXY20001_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d9.yihaodianimg.com/N05/M00/24/DF/CgQI0lQ3umiAYat_AAMa5tG_TXY20001_300x300.jpg" alt="">
</a>
</li>
<li>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d6.yihaodianimg.com/N05/M02/24/DF/CgQI0lQ3um2AEZpbAANwKuHIjlw93501_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d6.yihaodianimg.com/N05/M02/24/DF/CgQI0lQ3um2AEZpbAANwKuHIjlw93501_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d6.yihaodianimg.com/N05/M02/24/DF/CgQI0lQ3um2AEZpbAANwKuHIjlw93501_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d6.yihaodianimg.com/N05/M02/24/DF/CgQI0lQ3um2AEZpbAANwKuHIjlw93501_300x300.jpg" alt="">
</a>
</li>
<li>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d7.yihaodianimg.com/V00/M03/75/FD/CgQDslQ3unuAdCOKAAGQmS56iC058101_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d7.yihaodianimg.com/V00/M03/75/FD/CgQDslQ3unuAdCOKAAGQmS56iC058101_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d7.yihaodianimg.com/V00/M03/75/FD/CgQDslQ3unuAdCOKAAGQmS56iC058101_300x300.jpg" alt="">
</a>
<a href="#" class="pic">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://d7.yihaodianimg.com/V00/M03/75/FD/CgQDslQ3unuAdCOKAAGQmS56iC058101_300x300.jpg" alt="">
</a>
</li>
</ul>
</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(){
// demo1
$('#slide1').swipeSlide();

// demo2
$('#slide2').swipeSlide({
autoSwipe : false,
continuousScroll:true,
lazyLoad : true
});

// demo2
$('#slide3').swipeSlide({
continuousScroll:true,
speed : 3000,
Expand All @@ -196,6 +350,25 @@ <h2><a href="http://ons.me/500.html" target="_blank">swipeSlide for Zepto/jQuery
$('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
}
});

// demo4
var slideTab = $('.slide_tab .slide').swipeSlide({
continuousScroll:true,
autoSwipe : false,
lazyLoad : true,
callback : function(i){
$('.slide_tab .tab .item').eq(i).addClass('cur').siblings().removeClass('cur');
}
});
$('.slide_tab .tab .item').on('click',function(i){
slideTab.goTo($(this).index());
});
$('.slide_tab .btn_left').on('click',function(i){
slideTab.goTo('prev');
});
$('.slide_tab .btn_right').on('click',function(i){
slideTab.goTo('next');
});
});
</script>
</body>
Expand Down
63 changes: 46 additions & 17 deletions js/swipeSlide.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* swipeSlide
* http://ons.me/500.html
* 西门
* 3.0(150227)
* 3.1.0(150313)
*/
;(function(win,$){
'use strict';
Expand Down Expand Up @@ -35,7 +35,7 @@

// 绑定swipeSlide
$.fn.swipeSlide = function(options){
new sS(this, options);
return new sS(this, options);
};
var sS = function(element, options){
var me = this;
Expand Down Expand Up @@ -158,13 +158,16 @@
var $li = me.opts.ul.children();
var $thisImg = $li.eq(index).find('[data-src]');
if($thisImg){
if($thisImg.is('img')){
$thisImg.attr('src',$thisImg.data('src'));
$thisImg.removeAttr('data-src');
}else{
$thisImg.css({'background-image':'url('+$thisImg.data('src')+')'});
$thisImg.removeAttr('data-src');
}
$thisImg.each(function(i){
var $this = $(this);
if($this.is('img')){
$this.attr('src',$this.data('src'));
$this.removeAttr('data-src');
}else{
$this.css({'background-image':'url('+$this.data('src')+')'});
$this.removeAttr('data-src');
}
});
}
}

Expand Down Expand Up @@ -235,7 +238,6 @@
fnSlide(me, 'next', '.3');
}
}
me.fnAutoSlide();
me._moveDistance = me._moveDistanceIE = 0;
}

Expand All @@ -249,27 +251,51 @@
}
};

// 指定轮播
sS.prototype.goTo = function(i){
var me = this;
fnSlide(me, i, '.3');
};

// 轮播方法
function fnSlide(me, direction, num){
function fnSlide(me, go, num){
// 判断方向
if(direction == 'next'){
me._index++;
if(typeof go === 'number'){
me._index = go;
// 加载当前屏、前一屏、后一屏
if(me.opts.lazyLoad){
// 因为连续滚动，复制dom，所以要多加1
if(me.opts.continuousScroll){
fnLazyLoad(me, me._index);
fnLazyLoad(me, me._index+1);
fnLazyLoad(me, me._index+2);
}else{
fnLazyLoad(me, me._index-1);
fnLazyLoad(me, me._index);
fnLazyLoad(me, me._index+1);
}
}
}else if(go == 'next'){
me._index++;
if(me.opts.lazyLoad){
if(me.opts.continuousScroll){
fnLazyLoad(me, me._index+2);
}else{
fnLazyLoad(me, me._index+1);
}
}
}else if(direction == 'prev'){
}else if(go == 'prev'){
me._index--;
// 往上滚动比较特殊，只有连续滚动&&懒加载时才有
if(me.opts.lazyLoad && me.opts.continuousScroll){
if(me.opts.lazyLoad){
// 往前到最后一屏，加载最后一屏前一屏
if(me._index < 0){
fnLazyLoad(me, me._liLength-1);
}else{
fnLazyLoad(me, me._index);
if(me.opts.continuousScroll){
fnLazyLoad(me, me._index);
}else{
fnLazyLoad(me, me._index-1);
}
}
}
}
Expand Down Expand Up @@ -299,12 +325,15 @@
fnScroll(me, num);
}
me.opts.callback(me._index);
me.fnAutoSlide();
}

// 轮播动作
function fnScroll(me, num){
fnTransition(me, me.opts.ul, num);
fnTranslate(me, me.opts.ul, -me._index*me._slideDistance);
// 清除autoSlide自动轮播方法
clearInterval(me.autoSlide);
}

})(window, window.Zepto || window.jQuery);
Loading

0 comments on commit e9bfda1

Please sign in to comment.