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

it2022-05-05 111

html结构：

css样式：

/*轮播广告*/.slibanner {overflow: hidden;position: relative;width:100%;height: 456px;}.slideContent { width: 1200px; margin: 0 auto; position: relative; height: 456px; }.slideContent .slideShow {zoom: 1;width: 1920px; position: absolute; left: -360px; top: 0; height: 456px; }.slideContent .slideShow li { position: absolute;width: 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; width:1920px;}

.slideBg {width: 1200px; height: 1px; position: absolute;z-index: 400; bottom: 38px;}.slideContent .slideControl li {width: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; });}

转载于:https://www.cnblogs.com/mengwei-ziyun/p/5345319.html

相关资源：Flash 带按钮的图片轮换淡入淡出显示效果.rar

专利

最新回复(0)