一个仿腾讯娱乐频道焦点图轮播的插件
ui3g.js
/*
顶部大图滚动
*/
var slide = (function() {
var quadEaseOut;
var doc = document;
var $ = function(s){
return document.getElementById(s);
}
/**
获取索引值，工具类
@param {Element} current 当前元素
@param {Object} obj 元素集合
**/
var getIndex = function(current, obj) {
for (var i=0; i<obj.length; i++) {
if (obj[i] == current) {
return i;
}
}
};
/**
@param {Element} el 目标元素
**/
var siblings = function(el) {
var r = [],
n = el.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== el ) {
r.push( n );
}
}
return r;
};
/**
设置 Slide 宽高
@param {Element} el Slide 元素
@param {Number} width Slide 宽度
@param {Number} height Slide 高度
**/
var setSlideWH = function(el, width, height) {
var styleW,
styleH;
if (width == '100%') { // 自适应宽度
styleW = '100%';
} else { // 定宽
styleW = width + 'px';
}
if (height == '100%') { // 自适应高度
styleH = '100%';
} else { // 定高
styleH = height + 'px';
}
el.style.width = styleW;
el.style.height = styleH;
};
var readStyle = function(obj, name){
if(obj.style[name]){
return obj.style[name];
}else if(obj.currentStyle){
return obj.currentStyle[name]
}else if(document.defaultView && document.defaultView.getComputedStyle){
var d=document.defaultView.getComputedStyle(obj,null);
return d.getPropertyValue(name)
}else{
return null
}
};
var style = {
setOpacity : function(obj,opacity){
if(typeof(obj.style.opacity) != 'undefined'){
obj.style.opacity = opacity;
}else{
obj.style.filter = 'Alpha(Opacity=' + (opacity*100) + ')';
};
}
};
/* 动画 */
var extend = {
/**
渐显元素
@param {Element} target 目标元素
**/
fadeIn : function(obj,time){
if(readStyle(obj, 'display') == 'none'){
obj.style.display = 'block';
};
style.setOpacity(obj,0);
time = time || 200;
var opacity = 0,step = time / 20;
clearTimeout(obj.showT);
obj.showT = setTimeout(function(){
if(opacity >= 1) { style.setOpacity(obj,1); return; }
opacity +=1/step;
style.setOpacity(obj,opacity);
obj.showT = setTimeout(arguments.callee,20);
},20);
},
/**
渐隐元素
@param {Element} target 目标元素
**/
fadeOut : function(obj,time){
time = time || 200;
style.setOpacity(obj,1);