js淡入淡出轮换思想（1）

html结构：

<div class="slibanner" >
<div class="slideContent" id="box">
<ul class="slideShow" id="tklist">
<li><a class="slideBlock current" target="_blank" href="#" ><img alt="" data-src="http://img01.cunan.com//upload/test1458716507.jpg"></a></li>
<li><a class="slideBlock current" target="_blank" href="#" ><img alt="" data-src="http://img01.cunan.com//upload/test1458628829.jpg" ></a></li>
<li><a class="slideBlock current" target="_blank" href="#" ><img alt="" data-src="http://img01.cunan.com//upload/test1458118629.jpg" ></a></li>
<li><a class="slideBlock current" target="_blank" href="#" ><img alt="" data-src="http://img01.cunan.com//upload/test1458206514.jpg" ></a></li>
<li><a class="slideBlock current" target="_blank" href="#" ><img alt="" data-src="http://img01.cunan.com//upload/test1458189221.jpg" ></a></li>
</ul>
<div class="slideBg"><ul class="slideControl"></ul></div>
</div>
</div>

css样式：

/*轮播广告*/
.slibanner {overflow: hidden;position: relative;100%;height: 456px;}
.slideContent { 1200px; margin: 0 auto; position: relative; height: 456px; }
.slideContent .slideShow {zoom: 1; 1920px; position: absolute; left: -360px; top: 0; height: 456px; }
.slideContent .slideShow li { position: absolute; 1920px; height: 456px;}
.slideContent .slideShow .slideBlock {position: absolute;left: 0; opacity: 0;top: 0;}
.slideContent .slideShow .slideBlock.current {opacity: 1;}
.slideContent .slideShow li img {display: block; 1920px;}

.slideBg { 1200px; height: 1px; position: absolute;z-index: 400; bottom: 38px;}
.slideContent .slideControl li {14px; height:14px; margin:0px 5px;background:#999 ;border:1px solid #999; border-radius:100%; cursor: pointer; display: inline-block;overflow: hidden;}
.slideContent .slideControl li.current { border:1px solid #8F1D78;background:none;}
.slideContent .slideControl { /*background:rgba(0,0,0,0.2);*/ height: 1px; border-radius:20px; text-align: center;} 

js代码：

// JavaScript Document
$(function() {
if(document.getElementById("box") != null){
addNumberLi('box','slideShow','li','slideControl',"li","current");
var toggle = new ezg_toggleInterval('box','slideShow','li','slideControl','li','current',500,5000);
}
});
// 各种浏览器兼容 页面是否可见
var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
//添加数字选项
function addNumberLi(boxId,imgUlC,imgLi,numberUlC,numElement,numCurrentName){
//轮换图片数量
var count = getByClass(document.getElementById(boxId),imgUlC)[0].getElementsByTagName(imgLi).length;
//加载第一个图片
if(count > 0){
var data_src = $("#" + boxId + " " + imgLi + ":eq(0)").find("img").attr("data-src");
if( typeof data_src !== "undefined" && data_src !== ""){
$("#" + boxId + " " + imgLi + ":eq(0)").find("img").attr("src",data_src);
$("#" + boxId + " " + imgLi + ":eq(0)").find("img").removeAttr("data-src");
};
}
//单个图片情况下
if(count < 2){getByClass(document.getElementById(boxId),numberUlC)[0].parentElement.style.display = "none"; return;}
var strNumberLi = "";
for(var i = 0;i < count;i++){
if(i != 0){
strNumberLi += "<"+numElement+"></"+numElement+">";
}else{
strNumberLi += "<"+numElement+" class ='" + numCurrentName + "'></"+numElement+">";
}
}
getByClass(document.getElementById(boxId),numberUlC)[0].innerHTML = strNumberLi;
}

//淡入淡出切换图片类
function ezg_toggleInterval(boxId,imgUlC,imgLi,numberUlC,numberLi,numberLiNowName,hoverTime,toggleTime){
//边框盒子
this.oBox = document.getElementById(boxId);
//轮换图片盒子
this.oBigUl = getByClass(this.oBox,imgUlC)[0];
//轮换图片项
this.aLiBig = this.oBigUl.getElementsByTagName(imgLi);
//数字选卡盒子
this.oNumUl = getByClass(this.oBox,numberUlC)[0];
//数字选卡项
this.aLiNumber = this.oNumUl.getElementsByTagName(numberLi);
//数字选卡选中类名
this.aLiNumberNowName = numberLiNowName;
//停留触发
this.aLiNumberOnTab = null;
//定时轮换触发
this.oBoxInterval = null;
//样式z-index的值
this.nowZindex = 1;
//当前显示位置
this.now = 0;
//旧位置
this.old = -1;
//定时对象
this.oBoxTimeout = null;

if(typeof ezg_toggleInterval.tab === "undefined" ){
//切换图片和相应其他切换
ezg_toggleInterval.prototype.tab = function(){
this.aLiBig[this.now]
//数字选卡类名更改
for(var i=0; i < this.aLiNumber.length; i++){
if(this.aLiNumber[i].className === ""){continue;}
this.aLiNumber[i].className = '';
}
this.aLiNumber[this.now].className = this.aLiNumberNowName;
//轮换图片样式修改
if(this.old > -1){this.aLiBig[this.old].style.opacity = 0;}//防止切换过快和浏览器未激活时间缩短问题
var old = 0;
for(var i = 0; i < this.aLiBig.length; i++){
if(this.aLiBig[i].style.zIndex == 1 ){
this.aLiBig[i].style.zIndex = 0;
old = i;
this.old = i;
}
}
this.aLiBig[this.now].style.zIndex = 1;
this.aLiBig[this.now].style.opacity = 0;
//渐变
startMoveJQ(this.aLiBig[this.now],this.aLiBig[old],'opacity',hoverTime*2);
}
//上一个
ezg_toggleInterval.prototype.prev = function(){
//if(!document.hasFocus()) return; //页面是否激活
if( document[state] !== null && document[state] === 'hidden') return; //页面是否可见
this.now--;
if(this.now == -1){
this.now = this.aLiNumber.length - 1;
}
this.tab();
}
//下一个
ezg_toggleInterval.prototype.next = function(){
//if(!document.hasFocus()) return; //页面是否激活
if( document[state] !== null && document[state] === 'hidden') return; //页面是否可见
this.now++;
if(this.now == this.aLiNumber.length){
this.now = 0;
}
this.tab();
}
//定时轮换
ezg_toggleInterval.prototype.oBoxTimeoutF = function(toggleTime){
var self = this;
if(self.oBoxTimeout){clearTimeout(self.oBoxTimeout);}//防止切换过快和浏览器未激活时间缩短问题
self.oBoxTimeout = setTimeout(function(){
self.next();
self.oBoxTimeoutF(toggleTime);
},toggleTime);
}
}

(function(e){
var self = e;
//单个图片情况下
if(self.aLiBig.length < 2){return;}
//初始化图片换项
for(var i = 0; i < self.aLiBig.length; i++){
if(i != 0 ){
self.aLiBig[i].style.zIndex = 0;
self.aLiBig[i].style.opacity = 0;
}else{
self.aLiBig[i].style.zIndex = 1;
self.aLiBig[i].style.opacity = 1;
}
}
//给数字选卡添加事件
for(var i = 0; i < self.aLiNumber.length; i++){
self.aLiNumber[i].index = i;
//鼠标移上事件
self.aLiNumber[i].onmouseover = function(){
var index = this.index;
if(index == self.now){return;}
if(self.aLiNumberOnTab){clearTimeout(self.aLiNumberOnTab);}//防止切换过快和浏览器未激活时间缩短问题
//停留多少时间触发
self.aLiNumberOnTab = setTimeout(function(){
self.now = index;//设置当前位置
self.tab();//切换图片
},hoverTime*1.2);
}
//鼠标移出事件
self.aLiNumber[i].onmouseout = function(){
clearTimeout(self.aLiNumberOnTab);
}
}
//定时触发事件
self.oBoxTimeoutF(toggleTime);
self.oBox.onmouseover = function(){
if(self.oBoxTimeout){clearTimeout(self.oBoxTimeout);}
}
self.oBox.onmouseout = function(){
self.oBoxTimeoutF(toggleTime);//改变速度修改3000 ，例如3000=3秒钟
}
})(this);
}
//根据类名得到得到元素 oParent=父对象， name = 类名
function getByClass(oParent,name)
{
if(typeof oParent === "undefined" || oParent == null){return;}
//父元素下的所有元素
var aClass = oParent.getElementsByTagName('*');
//保存name匹配元素
var arlt = [];
for(var i=0; i<aClass.length; i++){
if(aClass[i].className==name){
arlt.push(aClass[i]);
}
}
return arlt;
}
//得到费行间样式 obj=本对象，name=样式名
function getStyle(obj,name)
{
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];//火狐浏览器情况
}
}
//jquery animate渐变
function startMoveJQ(obj,objOld,styleName,time){
//延迟加载
var data_src = $(obj).find("img").attr("data-src");
if( typeof data_src !== "undefined" && data_src !== ""){ $(obj).find("img").attr("src",data_src); $(obj).find("img").removeAttr("data-src"); };
//动画
$(obj).stop().animate({ opacity: 1 },time,function(){
objOld.style.opacity = 0;
});
}