diff --git a/1.1/base.js b/1.1/base.js
index 841def8..1d47e13 100644
--- a/1.1/base.js
+++ b/1.1/base.js
@@ -38,7 +38,6 @@ KISSY.add('gallery/slide/1.1/base',function(S){
// 构造函数
init:function(selector,config){
-
var self = this;
if(S.isObject(selector)){
@@ -278,7 +277,6 @@ KISSY.add('gallery/slide/1.1/base',function(S){
// 如果是动画效果，则构建Wrap
buildWrap: function(){
var self = this;
-
self.animwrap = S.Node.create('');
self.animwrap.set('innerHTML', self.animcon.get('innerHTML'));
self.animcon.set('innerHTML', '');
@@ -361,7 +359,6 @@ KISSY.add('gallery/slide/1.1/base',function(S){
});
}
};
-
effectInitFn[self.effect]();
return this;
@@ -403,7 +400,12 @@ KISSY.add('gallery/slide/1.1/base',function(S){
self.hightlightNav(self.getWrappedIndex(self.currentTab));
//是否自动播放
if (self.autoSlide === true) {
- self.play();
+ // 如果设置了invisibleStop为true，还要多判断一下slide是否在可视区
+ // 未设置invisibleStop为true，则直接自动播放
+ if((self.invisibleStop && self.isSlideVisible())||
+ !self.invisibleStop){
+ self.play();
+ }
}
return this;
},
@@ -535,15 +537,21 @@ KISSY.add('gallery/slide/1.1/base',function(S){
self.adaptive_width():
self.animcon.get('region').width;
height = self.pannels.item(index).get('region').height;
+
+ // 修复resize时animwrap尺寸计算有误
+ self.animwrap.setStyles({
+ width:self.pannels.size() * width + 'px'
+ });
width /= self.colspan;
-
+
// pannels的高度是不定的，高度是根据内容
// 来撑开的因此不能设置高度，而宽度则需要设置
self.pannels.setStyles({
width:width+'px',
display:'block'
});
+
self.animcon.setStyles({
width:width * self.colspan +'px',
@@ -563,6 +571,12 @@ KISSY.add('gallery/slide/1.1/base',function(S){
height = self.adaptive_height ?
self.adaptive_height():
self.animcon.get('region').height;
+
+ // 修复resize时animwrap尺寸计算有误
+ self.animwrap.setStyles({
+ height:self.pannels.size() * height + 'px'
+ });
+
height /= self.colspan;
self.pannels.setStyles({
@@ -705,17 +719,19 @@ KISSY.add('gallery/slide/1.1/base',function(S){
if(self.hoverStop){
self.con._delegate('mouseover',function(e){
//e.halt();
+ self.isMouseover = true; // 增加对鼠标状态的标识
if(self.autoSlide)self.stop();
},'.'+self.contentClass+' .'+self.pannelClass);
self.con._delegate('mouseout',function(e){
//e.halt();
+ self.isMouseover = false;
if(self.autoSlide)self.play();
},'.'+self.contentClass+' .'+self.pannelClass);
}
// 绑定窗口resize事件
try {
- S.Event.on('resize',function(e){
+ S.Event.on(window,'resize',function(e){
self.fixSlideSize(self.currentTab);
self.relocateCurrentTab();
},window);
@@ -905,11 +921,75 @@ KISSY.add('gallery/slide/1.1/base',function(S){
}
}
+
+ // slide离开视野，是否暂停滚动
+ if(self.invisibleStop){
+ // 检测是否支持pagevisivility，脱离视野，暂停播放
+ var visProp = S.getHiddenProp();
+ if(visProp){
+ // 拼装visibilitychange事件名，并监听
+ var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange',autoPlayPageVisible;
+ S.Event.on(document,evtname,function(e){
+ // 如果页面离开视野，暂停播放
+ if(S.isHidden()){
+ if(self.timer){
+ autoPlayPageVisible = true;
+ self.stop();
+ //console.info('触发事件:'+e.type+' '+'播放状态：stop');
+ }else{
+ autoPlayPageVisible = false;
+ }
+ }else{
+ // 页面可见 && slide在视野内 && 停止播放前slide播放状态是‘正在播放’ 满足这三个条件继续播放
+ if(self.isSlideVisible()&&autoPlayPageVisible){
+ self.play();
+ //console.info('触发事件:'+e.type+' '+'播放状态：play');
+ }
+ }
+ });
+ }
+ // 监听onscoll,resize事件，通过坐标判断slide是否脱离可视区
+ S.Event.on(window,'scroll resize',function(e){
+ // 边界判断
+ if(self.isSlideVisible()){
+ // 防止与鼠标悬停slide停止播放的设置相冲突，if里要检测鼠标是否在slide上
+ // bug场景：鼠标悬浮在slide上，滚动页面，触发play，与hoverStop设置冲突
+ if(!self.timer&&
+ (!self.hoverStop||(self.hoverStop&&!self.isMouseover))){
+ self.play();
+ //console.info('触发事件:'+e.type+' '+'播放状态：play');
+ }
+ }else{
+ if(self.timer){
+ self.stop();
+ //console.info('触发事件:'+e.type+' '+'播放状态：stop');
+ }
+ }
+
+ });
+ }
return this;
-
},
-
+ // 判断slide是否在可视区内
+ isSlideVisible:function(){
+ var self = this,
+ slideLeft = self.animcon.offset().left,
+ slideTop = self.animcon.offset().top,
+ slideWidth = self.animcon.outerWidth(),
+ slideHeight = self.animcon.outerHeight(),
+ scrollTop = S.DOM.scrollTop(),
+ scrollLeft = S.DOM.scrollLeft();
+ if(scrollTop>slideTop+slideHeight||
+ scrollTop+S.DOM.height(window)slideLeft+slideWidth||
+ scrollLeft+S.DOM.width(window) self.pannels.size()){
index = self.pannels.size() - self.colspan;
}
animFn[self.effect](index);
-
self.currentTab = index;
self.hightlightNav(self.getWrappedIndex(index));
// TODO，讨论switch的发生时机
diff --git a/1.1/demo/d2.html b/1.1/demo/d2.html
index 17b2a5f..0f0ad2c 100644
--- a/1.1/demo/d2.html
+++ b/1.1/demo/d2.html
@@ -75,7 +75,7 @@
selectedClass:'current',
triggerSelector:'a',
effect:'fade',
- autoPlay:true
+ autoSlide:true
});
var ctl = S.one('#JSlide-ctrl');
diff --git a/1.1/demo/fullwidth.html b/1.1/demo/fullwidth.html
new file mode 100755
index 0000000..97d79a5
--- /dev/null
+++ b/1.1/demo/fullwidth.html
@@ -0,0 +1,97 @@
+
+
+
+
+
+Demo
+
+
+
+
+
+
+
+
+width 100% 自适应
+
+
+
+
+
+
diff --git a/1.1/demo/index.html b/1.1/demo/index.html
index 1495611..7bf2158 100644
--- a/1.1/demo/index.html
+++ b/1.1/demo/index.html
@@ -41,6 +41,8 @@ demo
杂项1 杂项
触屏功能Demo 触屏支持
Flipsnap Flipsnap用法
+ 脱离可视区停止播放demo slide脱离可视区，自动停止播放
+ fullwidth slide宽度自适应
diff --git a/1.1/demo/invisibleStop.html b/1.1/demo/invisibleStop.html
new file mode 100755
index 0000000..529e765
--- /dev/null
+++ b/1.1/demo/invisibleStop.html
@@ -0,0 +1,129 @@
+
+
+
+
+Demo
+
+
+
+
+
+
+
+
+
+往下拉，slide在下面
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+