function cleanWhitespace(oEelement) { for(var i=0;i<oEelement.childNodes.length;i++){ var node=oEelement.childNodes[i]; if(node.nodeType==3 && !/\S/.test(node.nodeValue)) { node.parentNode.removeChild(node); } } } //轮播代码 this.layerGlide=function(auto,oBox,sSingleSize,second,fSpeed,point) { var interval,timeout; //两个定时器 var pos; //当前定位坐标整形的绝对值 var time = second, now = 0; //time图片移动一次时间间隔， now当前图片的index值 var speed = fSpeed //移动速度 var delay = second * 1000; //每次切换图片的时间间隔 var picBox = document.getElementById(oBox); cleanWhitespace(picBox); var pic = picBox.childNodes[0]; //图片列表 var des = picBox.childNodes[2].getElementsByTagName("li"); //图片列表 var con = picBox.childNodes[3].getElementsByTagName("li"); var sum = con.length; var setVal = function(s, flag) { return function() { pos = Math.abs(parseInt(pic.style[point])); if(flag > 0){ //当前点大于目标点坐标，画面向右移动，left值减小 pic.style[point] =-Math.floor(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px'; } if(flag < 0) { pic.style[point] =-Math.ceil(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px'; } if(pos == (sSingleSize * s)) { now = s; clearInterval(interval); } } }; var changeTo = function(num) { for(var i=0; i<sum; i++) { con[i].className = ""; des[i].className = ""; }; con[num].className = "on"; des[num].className = "on"; var flag = Math.abs(parseInt(pic.style[point]))-sSingleSize * num ; interval = setInterval(setVal(num, flag), time); //bkg.hide().fadeIn(); } function autoGlide() { clearTimeout(interval); now = (now == (parseInt(sum)-1) )? 0: (now + 1); changeTo(now); timeout = setTimeout(autoGlide,delay); } function isAuto() { if(auto) { timeout = setTimeout(autoGlide,delay); }; } isAuto(); //开始自动轮播 for(var i=0; i<sum; i++) //导航按钮 { con[i].onmouseover = (function(i) { return function() { clearTimeout(timeout); clearInterval(interval); changeTo(i); this.onmouseout=isAuto(); } })(i) } } //淡入淡出 this.layerFader=function(auto, oBox, second, count, speed) { var interval,timeout; //两个定时器 var now = 0; //time图片移动一次时间间隔， now当前图片的index值 var delay = second * 1000; //每次切换图片的时间间隔 var picBox = document.getElementById(oBox); cleanWhitespace(picBox); var pic = picBox.childNodes[0].getElementsByTagName("li"); var des = picBox.childNodes[2].getElementsByTagName("li"); var con = picBox.childNodes[3].getElementsByTagName("li"); var sum = con.length; function fadeIn(elem){ setOpacity(elem,0); //初始全透明 for(var i = 0;i<=count;i++){ //透明度改变 20 * 5 = 100 (function(i){ var level = i * 5; //透明度每次变化值 setTimeout(function(){ setOpacity(elem, level) },i*speed); })(i); } } function setOpacity(elem, level) { //设置透明度 if (elem.filters) { elem.style.filter = "alpha(opacity=" + level + ")"; } else { elem.style.opacity = level / 100; } } var changeTo = function(num) { for(var i=0; i<sum; i++) { con[i].className = ""; des[i].className = ""; pic[i].className = ""; }; fadeIn(pic[num]); con[num].className = "on"; des[num].className = "on"; pic[num].className = "on"; //bkg.hide().fadeIn(); } function autoGlide() { clearTimeout(interval); now = (now == (parseInt(sum)-1) )? 0: (now + 1); changeTo(now); timeout = setTimeout(autoGlide,delay); } function isAuto() { if(auto) { timeout = setTimeout(autoGlide,delay); }; } isAuto(); //开始自动轮播 for(var i=0; i<sum; i++) //导航按钮 { con[i].onmouseover = (function(i) { return function() { clearTimeout(timeout); //clearInterval(interval); changeTo(i); this.onmouseout=isAuto(); } })(i) } }
jquery相对于js就简单了很多，这里就不赘述了。大三的时候上设计模式课，老师告诉我们针对接口而不是针对实现编程，代码中尽量不要出现常量，提高代码的复用性，所以写代码的时候，把可变的因素都提到了参数中。最后一句，对于js的DOM操作，js原生是王道，多用多练，才能掌握的好，希望以后越走越远。
以上这篇原生JS实现图片轮播与淡入效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: