// 库文件 wtoop.js
/**
* !function: 轮播图片
* !author:wangTao
* !version:2015/02/01
* !param
* !param
**/
function $_f(){}
var $ = { fn:new $_f(), getId:function (id){ return document.getElementById(id)}}
/**
* !轮播
* !paramfn ,{ string } 容器ID
* !param val ,{ string } 父级ID
* !param Thedefault ,{ string } 轮播图片默认值
* !param digital ,{ int } 0是开启数字 1是关闭
* !param className ,{ string } 数字开启必须填写 数字父级 Class 名称
* !param id ,{ string } 数字开启必须填写 数字父级 ID 名称
* !param zThedefault ,{ string } 数字开启必须填写 数字子级 默认值
* !param color ,{ string } 鼠标hover 数字背景颜色
* !param zThedefaultColor ,{ string } 默认 数字背景颜色
* !param diff ,{ int } 0是默认运动 1是渐变
* !return
**/
$_f.prototype.Carousel = function (fn, val, Thedefault, digital, className, id, zThedefault, color, zThedefaultColor, diff){
_this = this;
_this.f = $.getId(fn);
_this.z = $.getId(val);
_this.defa = this.z.getElementsByTagName(Thedefault);
_this.l = this.defa.length;
_this.w = this.defa[0].offsetWidth;
_this.max = _this.l * _this.w;
_this.index = 0;
switch(diff){
case 0:
_this.stopl = setInterval(setel,3000);
for(var i = 0; i < _this.l; i ++){
_this.z.appendChild(_this.defa[i].cloneNode(true));
}
function setel(){
if(_this.index >= _this.l){
_this.index = 0;
}
_this.index ++;
animation(_this.z,_this.w * _this.index,'left',30);
for(var i = 0; i < _this.uli.length; i ++){
_this.uli[i].style.backgroundColor = zThedefaultColor;
}
if(_this.index == _this.l){
_this.uli[0].style.backgroundColor = color;
}else{
_this.uli[_this.index].style.backgroundColor = color;
}
}
break;
case 1:
_this.defa[0].style.zIndex = 1;
for(var j = 0; j < _this.defa.length; j ++){
_this.defa[0].style.opacity = '1';
}
_this.stopc = setInterval(setec,3000);
function setec(){
if(_this.index >= _this.l){
_this.index = 0;
}
for(var i = 0; i < _this.uli.length; i ++){
_this.defa[i].opacity = 100;
_this.uli[i].style.backgroundColor = zThedefaultColor;
}
for(var j = 0; j < _this.defa.length; j ++){
for(var z = 0; z < _this.defa.length; z ++){
_this.defa[z].style.opacity = '1';
_this.defa[z].style.zIndex = '0';
}
animation(_this.defa[_this.index],0,'opacity',30);
_this.defa[_this.index].style.zIndex = '1';
}
if(_this.index == _this.l){
_this.uli[0].style.backgroundColor = color;
}else{
_this.uli[_this.index].style.backgroundColor = color;
}
_this.index ++;
}
break;
}
_this.f.onmouseover = function (){
if(diff == 0){
clearInterval(_this.stopl);
}else{
clearInterval(_this.stopc);
}
}
_this.f.onmouseout = function (){
if(diff == 0){
_this.stopl = setInterval(setel,3000);
}else{
_this.stopc = setInterval(setec,3000);
}
}
if(digital == 0){
_this.u = document.createElement('ul');
_this.u.className = className;
_this.u.id = id;
for(var j = 0; j < _this.l; j ++){
_this.li = document.createElement('li');
_this.li.innerHTML = j + 1;
_this.u.appendChild(_this.li);
}
_this.f.appendChild(_this.u);
_this.uli = $.getId(id).getElementsByTagName(zThedefault);
if( diff == 0 ){
for(var i = 0; i < _this.uli.length; i ++){
_this.uli[i].index = i;
_this.uli[i].onmouseover = function (){
animation(_this.z,_this.w * this.index,'left',30);
for(var i = 0; i < _this.uli.length; i ++){
_this.uli[i].style.backgroundColor = zThedefaultColor;
}
this.style.backgroundColor = color;
_this.index = this.index;
}
}
}else{
for(var i = 0; i < _this.uli.length; i ++){
_this.uli[i].index = i;
_this.uli[i].onmouseover = function (){
animation(this.index,100,'opacity',30);
for(var i = 0; i < _this.uli.length; i ++){
_this.uli[i].style.backgroundColor = zThedefaultColor;
}
this.style.backgroundColor = color;
_this.index = this.index;
}
}
}
}
function animation(obj, target, attr, speed){
clearInterval(obj.set);
obj.set = setInterval(function (){
if(attr == 'opacity'){
var rounding = Math.ceil((target - obj.opacity) / 6) | Math.floor((target - obj.opacity) / 6);
if(obj.opacity == target){
clearInterval(obj.set);
}else{
//obj.style.filter='alpha(opacity:'+(target+rounding)+')';
obj.style.opacity=(obj.opacity += rounding)/100;
}
}else{
var rounding = Math.ceil((target + obj.offsetLeft) / 6) | Math.floor((target + obj.offsetLeft) / 6);
if(obj.offsetLeft == target){
clearInterval(obj.set);
}else if(obj.offsetLeft == -_this.max){
clearInterval(obj.set);
obj.style[attr] = 0;
}else{
obj.style[attr] = -(rounding - obj.offsetLeft) + 'px';
}
}
},speed)
}
}
$.fn.Carousel(
'wrap',//容器ID
'ul',//父级ID
'li',//轮播图片默认值
0,//0是开启数字 1是关闭
'w_bp', //数字开启必须填写 数字父级 Class 名称
'w_bg',//数字开启必须填写 数字父级 ID 名称
'li',//数字开启必须填写 数字子级 默认值
'red',//数字开启必须填写鼠标hover 数字背景颜色
'#666',//数字开启必须填写默认 数字背景颜色
1//默认值行轮播
);
/**
* !function: 轮播图片
* !author:wangTao
* !version:2015/02/01
* !param
* !param
**/
function $_f(){}
var $ = { fn:new $_f(), getId:function (id){ return document.getElementById(id)}}
/**
* !轮播
* !paramfn ,{ string } 容器ID
* !param val ,{ string } 父级ID
* !param Thedefault ,{ string } 轮播图片默认值
* !param digital ,{ int } 0是开启数字 1是关闭
* !param className ,{ string } 数字开启必须填写 数字父级 Class 名称
* !param id ,{ string } 数字开启必须填写 数字父级 ID 名称
* !param zThedefault ,{ string } 数字开启必须填写 数字子级 默认值
* !param color ,{ string } 鼠标hover 数字背景颜色
* !param zThedefaultColor ,{ string } 默认 数字背景颜色
* !param diff ,{ int } 0是默认运动 1是渐变
* !return
**/
$_f.prototype.Carousel = function (fn, val, Thedefault, digital, className, id, zThedefault, color, zThedefaultColor, diff){
_this = this;
_this.f = $.getId(fn);
_this.z = $.getId(val);
_this.defa = this.z.getElementsByTagName(Thedefault);
_this.l = this.defa.length;
_this.w = this.defa[0].offsetWidth;
_this.max = _this.l * _this.w;
_this.index = 0;
switch(diff){
case 0:
_this.stopl = setInterval(setel,3000);
for(var i = 0; i < _this.l; i ++){
_this.z.appendChild(_this.defa[i].cloneNode(true));
}
function setel(){
if(_this.index >= _this.l){
_this.index = 0;
}
_this.index ++;
animation(_this.z,_this.w * _this.index,'left',30);
for(var i = 0; i < _this.uli.length; i ++){
_this.uli[i].style.backgroundColor = zThedefaultColor;
}
if(_this.index == _this.l){
_this.uli[0].style.backgroundColor = color;
}else{
_this.uli[_this.index].style.backgroundColor = color;
}
}
break;
case 1:
_this.defa[0].style.zIndex = 1;
for(var j = 0; j < _this.defa.length; j ++){
_this.defa[0].style.opacity = '1';
}
_this.stopc = setInterval(setec,3000);
function setec(){
if(_this.index >= _this.l){
_this.index = 0;
}
for(var i = 0; i < _this.uli.length; i ++){
_this.defa[i].opacity = 100;
_this.uli[i].style.backgroundColor = zThedefaultColor;
}
for(var j = 0; j < _this.defa.length; j ++){
for(var z = 0; z < _this.defa.length; z ++){
_this.defa[z].style.opacity = '1';
_this.defa[z].style.zIndex = '0';
}
animation(_this.defa[_this.index],0,'opacity',30);
_this.defa[_this.index].style.zIndex = '1';
}
if(_this.index == _this.l){
_this.uli[0].style.backgroundColor = color;
}else{
_this.uli[_this.index].style.backgroundColor = color;
}
_this.index ++;
}
break;
}
_this.f.onmouseover = function (){
if(diff == 0){
clearInterval(_this.stopl);
}else{
clearInterval(_this.stopc);
}
}
_this.f.onmouseout = function (){
if(diff == 0){
_this.stopl = setInterval(setel,3000);
}else{
_this.stopc = setInterval(setec,3000);
}
}
if(digital == 0){
_this.u = document.createElement('ul');
_this.u.className = className;
_this.u.id = id;
for(var j = 0; j < _this.l; j ++){
_this.li = document.createElement('li');
_this.li.innerHTML = j + 1;
_this.u.appendChild(_this.li);
}
_this.f.appendChild(_this.u);
_this.uli = $.getId(id).getElementsByTagName(zThedefault);
if( diff == 0 ){
for(var i = 0; i < _this.uli.length; i ++){
_this.uli[i].index = i;
_this.uli[i].onmouseover = function (){
animation(_this.z,_this.w * this.index,'left',30);
for(var i = 0; i < _this.uli.length; i ++){
_this.uli[i].style.backgroundColor = zThedefaultColor;
}
this.style.backgroundColor = color;
_this.index = this.index;
}
}
}else{
for(var i = 0; i < _this.uli.length; i ++){
_this.uli[i].index = i;
_this.uli[i].onmouseover = function (){
animation(this.index,100,'opacity',30);
for(var i = 0; i < _this.uli.length; i ++){
_this.uli[i].style.backgroundColor = zThedefaultColor;
}
this.style.backgroundColor = color;
_this.index = this.index;
}
}
}
}
function animation(obj, target, attr, speed){
clearInterval(obj.set);
obj.set = setInterval(function (){
if(attr == 'opacity'){
var rounding = Math.ceil((target - obj.opacity) / 6) | Math.floor((target - obj.opacity) / 6);
if(obj.opacity == target){
clearInterval(obj.set);
}else{
//obj.style.filter='alpha(opacity:'+(target+rounding)+')';
obj.style.opacity=(obj.opacity += rounding)/100;
}
}else{
var rounding = Math.ceil((target + obj.offsetLeft) / 6) | Math.floor((target + obj.offsetLeft) / 6);
if(obj.offsetLeft == target){
clearInterval(obj.set);
}else if(obj.offsetLeft == -_this.max){
clearInterval(obj.set);
obj.style[attr] = 0;
}else{
obj.style[attr] = -(rounding - obj.offsetLeft) + 'px';
}
}
},speed)
}
}
$.fn.Carousel(
'wrap',//容器ID
'ul',//父级ID
'li',//轮播图片默认值
0,//0是开启数字 1是关闭
'w_bp', //数字开启必须填写 数字父级 Class 名称
'w_bg',//数字开启必须填写 数字父级 ID 名称
'li',//数字开启必须填写 数字子级 默认值
'red',//数字开启必须填写鼠标hover 数字背景颜色
'#666',//数字开启必须填写默认 数字背景颜色
1//默认值行轮播
);