/*
focus.js
by sunhw 2014-10-16 重写
*/
;
(function() {
function Focus( option ) {
this.option = T.object.extend( {
root : '',
dotroot : '',
item : '',
dot : '',
cls : 'current',
progress : false
}, option || {} );
this.prevBtn = T.get( 'prevBtn' );
this.nextBtn = T.get( 'nextBtn' );
this.index = 0;
this.total = 0;
// 图片切换时间
this.duration = 5000;
// 动画时间
this.delay = 600;
// 进度条更新时间
this.steps = T.browser.ie < 7 ? 50 : 20;
this.width = 0;
var timer = 0, flag = false, self = this;
var initHandler = function() {
clearTimeout( timer );
if ( !flag ) {
self.init();
flag = true;
}
};
timer = setTimeout( initHandler, 3000 );
T.observer.addOne( F.EventCenter.FOCUS_AD_LOADED, initHandler );
}
Focus.prototype.play = function( index ) {
var self = this;
self.index = index;
T.each( self.items, function( item, key ) {
T.dom.setStyles( item, { 'visibility' : 'hidden', 'opacity' : 0 } );
//add by wangxk
T.dom.removeClass( item, "z-3" );
T.dom.addClass( item, "z-1" );
} );
T.each( self.dots, function( item, key ) {
T.dom.removeClass( item, self.option.cls );
} );
T.dom.addClass( self.dots[ index ], self.option.cls );
T.dom.setStyles( self.items[ index ], { 'visibility' : 'visible' } );
T.dom.addClass( self.items[ index ], "z-3" );
F.tween( self.items[ index ], F.math.tweener.easeOutQuint, self.delay / 1000, { 'opacity' : 1 }, function() {
self.option.progress && self.progress();
} );
};
Focus.prototype.autoRun = function() {
var self = this;
self.stopRun();
if ( self.total <= 1 ) {
return;
}
if ( self.option.progress ) {
self.progress();
} else {
self.autoTimer = setInterval( function() {
self.play( ++self.index % self.total );
}, self.duration );
}
};
Focus.prototype.progress = function() {
var self = this, $bar = T.get( '_progress' ), width = self.width || $bar.parentNode.offsetWidth, p = 0, d = self.duration, s = self.steps;
// 重置进度条
_clear();
self.progressTimer = setTimeout( _execute, s );
function _progress( p ) {
if ( p > d ) {
_clear();
self.play( ++self.index % self.total );
return;
}
T.dom.setStyle( $bar, 'width', p * 100 / d + '%' );
self.progressTimer = setTimeout( _execute, s );
}
function _clear() {
clearTimeout( self.progressTimer );
T.dom.setStyle( $bar, 'width', 0 );
T.dom.show( $bar.parentNode );
}
function _execute() {
p += s;
_progress( p );
}
};
Focus.prototype.stopRun = function() {
var self = this;
clearInterval( self.autoTimer );
clearTimeout( self.progressTimer );
};
Focus.prototype.init = function() {
var self = this;
var defer = 0, deferTime = 200;
self.items = T.query( '#focusWrap li' );
if ( !self.items.length || !T.get( self.option.dotroot ) ) {
return;
}
self.html = '';
self.tpl = '<a class="dot-wrp" href="javascript:;"><b class="dot"></b></a>';
T.each( self.items, function( item ) {
self.html += self.tpl;
} );
self.total = self.items.length;
T.get( self.option.dotroot ).innerHTML = self.html;
self.dots = T.query( '#dotLayout .dot-wrp' );
T.dom.addClass( self.dots[ 0 ], 'current' );
T.each( self.dots, function( item, key ) {
T.on( item, 'mouseover', function() {
clearTimeout( defer );
defer = setTimeout( function() {
if ( !T.dom.hasClass( item, 'current' ) ) { self.play( key );}
self.index = key;
}, deferTime );
} );
} );
if ( self.total > 1 ) {
T.dom.setStyle( self.prevBtn, 'visibility', 'visible' );
T.dom.setStyle( self.nextBtn, 'visibility', 'visible' );
}
T.on( self.prevBtn, 'click', function() {
if ( self.index <= 0 ) {
self.index = self.items.length - 1;
} else {
self.index--;
}
self.play( self.index );
} );
T.on( self.nextBtn, 'click', function() {
if ( self.index >= self.items.length - 1 ) {
self.index = 0;
} else {
self.index++;
}
self.play( self.index );
} );
T.on( T.get( self.option.root ), 'mouseover', function() { self.stopRun(); } );
T.on( T.get( self.option.root ), 'mouseout', function() { self.autoRun(); } );
//ipad
self.ipad = T.platform.isIpad;
var startX = 0, startMoveX = 0, startY = 0, startMoveY = 0, firstCheck = false;
var onTouchStart = function( e ) {
e = T.event.get( e );
if ( !e.touches.length ) { return;}
var touch = e.touches[ 0 ];
startX = touch.pageX;
startY = touch.pageY;
startMoveX = 0;
startMoveY = 0;
firstCheck = false;
};
var onTouchMove = function( e ) {
e = T.event.get( e );
if ( !e.touches.length ) {return;}
var touch = e.touches[ 0 ];
startMoveX = touch.pageX;
startMoveY = touch.pageY;
if ( firstCheck || Math.abs( touch.pageY - startY ) < Math.abs( touch.pageX - startX ) ) {
T.event.preventDefault( e );
}
firstCheck = true;
};
var onTouchEnd = function( e ) {
var index = self.index;
e = T.event.get( e );
if ( startMoveX === 0 ) {return;}
T.event.stop( e );
if ( Math.abs( startMoveX - startX ) < Math.abs( startMoveY - startY ) ) {return;}
if ( startMoveX > startX ) {
self.play( index + 1 );
} else {
self.play( index - 1 );
}
};
if ( self.ipad && ( self.total > 1 ) ) {
T.each( self.items, function( item ) {
T.on( item, 'touchstart', onTouchStart );
T.on( item, 'touchmove', onTouchMove );
T.on( item, 'touchend', onTouchEnd );
} );
}
if ( self.total > 1 ) {
self.autoRun();
}
};
T.dom.ready( function() {
var focus = new Focus( {
//progress : true,
root : 'focusWrap',
dotroot : 'dotLayout',
item : 'li',
dot : 'a.dot-wrp',
cls : 'current'
} );
} );
})();
/*
focus.less
by sunhw 2014-9-17
*/
@import '/css/base';
.mod-focus {
.foc-wrap {
position : relative;
width : 100%;
height : 100%;
.item {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
overflow : hidden;
visibility : hidden;
.opacity(0);
}
.foc-inner-list {
position : relative;
display : block;
width : 100%;
height : 100%;
}
.pic {
display : block;
width : 100%;
height : 100%;
}
.foc-text {
position : absolute;
color : #fff;
text-shadow : 1px 1px 1px #000;
b {
display : block;
width : 100%;
}
.upd {
margin-left : 12px;
}
.info {
font-weight : bold;
}
}
.foc-btn {
.prev, .next {
position : absolute;
top : 50%;
margin-top : -24px;
width : 30px;
height : 48px;
display : block;
text-align : center;
visibility : hidden;
background : url(img/focus_btn.png) no-repeat 0 0;
_background : none;
}
.prev {
left : 38px;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/pre.png');
&:hover {
background-position : -34px 0;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/pre_hover.png');
}
}
.next {
right : 38px;
background-position : -95px 0;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/next.png');
&:hover {
background-position : -61px 0;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/next_hover.png');
}
}
}
.fon-con-inner {
position : absolute;
left : 0;
width : 100%;
height : 100%;
}
.foc-con-dot {
position : absolute;
bottom : 26px;
width : 100%;
height : 0px;
font-size : 0;
text-align : center;
cursor : pointer;
.dot-wrp {
padding : 5px 4px;
display : inline-block;
cursor : pointer;
&:hover .dot {
background-color : #fff;
.opacity(1);
}
}
.dot {
width : 10px;
height : 10px;
.border-radius(5px);
vertical-align : top;
.opacity(.5);
background-color : #ccc;
}
.current .dot {
background-color : #fff;
.opacity(1);
}
}
.progress-wrap {
font-size : 0;
width : 100%;
height : 3px;
background-color : transparent;
position : absolute;
top : 0;
left : 0;
display : none;
.progress {
.opacity(0.75);
background-color : #f86400;
height : 100%;
width : 0;
}
}
}
}
.resp1080_1220 {
.mod-focus {
.foc-wrap .foc-text {
bottom : 40px;
left : 100px;
.tit {
font-size : 22px;
line-height : 30px;
}
.upd {
font-size : 14px;
}
.info {
font-size : 14px;
line-height : 28px;
}
}
}
}
.resp1440 {
.mod-focus {
.foc-wrap .foc-text {
bottom : 55px;
left : 120px;
.tit {
font-size : 26px;
line-height : 42px;
}
.upd {
font-size : 16px;
}
.info {
font-size : 16px;
line-height : 32px;
}
}
}
}
.resp1660 {
.mod-focus {
.foc-wrap .foc-text {
bottom : 70px;
left : 138px;
.tit {
font-size : 30px;
line-height : 42px;
}
.upd {
font-size : 18px;
}
.info {
font-size : 16px;
line-height : 32px;
}
}
}
}
.resp1080_1220();
@media screen and (min-width : @screen-l-width) and (max-width : @screen-xl-width-s) {
.resp1440();
}
@media screen and (min-width : @screen-xl-width) {
.resp1660();
}
.w1080, .w1220 {
.resp1080_1220();
}
.w1440 {
.resp1440();
}
.w1660 {
.resp1660();
}