淡入淡出的图片轮显幻灯片类

来源：互联网发布：ubuntu zsh oh my zsh 编辑：程序博客网时间：2024/05/13 03:41

编辑们总是需求各种幻灯片效果，不如抽时间把常用的效果都做出来，今天写了一个淡入淡出的幻灯片。

鼠标快速滑入，滑出不执行切换。

淡入淡出的效果直接用的自己以前写的一个运动框架，虽然执行效率不大高，但也足够用了。

样式没有细做，方便自定义，避免雷同，图片序号自动生成。

代码结构如下：

<div id="sliderfadeinContainer"><ul id="sliderfadein"><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242797_20120320173040.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242799_20120223100313.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242796_20120301113901.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242781_20120224142404.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242797_20120320173040.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242799_20120223100313.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242796_20120301113901.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242781_20120224142404.jpg"></li></ul></div>

使用的时候初始化一个即可：

var slider01=new sliderFadeIn('sliderfadeinContainer');    slider01.intialize();

演示地址

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>*{ margin:0; padding:0}#sliderfadeinContainer{ position:relative; width:650px; height:350px;}#sliderfadein { position:relative; background:#000; margin:50px auto 0; overflow:hidden; width:650px; height:330px}#sliderfadein li{ position:absolute; left:5px; top:5px; z-index:0; opacity:0; filter:alpha(opacity=0)}.ulBtn{ position:absolute; z-index:99999; left:0; bottom:0}.ulBtn li{ float:left; background:#C00; cursor:pointer; padding:10px; margin:5px; list-style:none}.ulBtn li.on{ color:#fff}#sliderfadeinContainer2{ position:relative; width:650px; height:350px;}#sliderfadein2 { position:relative; background:#c00; margin:50px auto 0; overflow:hidden; width:650px; height:330px}#sliderfadein2 li{ position:absolute; left:5px; top:5px; z-index:0; opacity:0; filter:alpha(opacity=0)}</style></head><body><div id="sliderfadeinContainer"><ul id="sliderfadein"><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242797_20120320173040.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242799_20120223100313.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242796_20120301113901.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242781_20120224142404.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242797_20120320173040.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242799_20120223100313.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242796_20120301113901.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242781_20120224142404.jpg"></li></ul></div><div id="sliderfadeinContainer2"><ul id="sliderfadein2"><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242797_20120320173040.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242799_20120223100313.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242796_20120301113901.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242781_20120224142404.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242797_20120320173040.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242799_20120223100313.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242796_20120301113901.jpg"></li><li><img src="http://image.dili360.com/photo/temp/24/2011/0323/34_15242781_20120224142404.jpg"></li></ul></div><a id="prev"  href="#">上一张</a><a id="next" href="#">下一张</a><script type="text/javascript">var $ = function (id) {return "string" == typeof id ? document.getElementById(id) : id;};function getStyle(obj, name){if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj, false)[name];}}function getElementsByClassName (className) {                  var all = document.all ? document.all : document.getElementsByTagName('*');                  var elements = new Array();                  for (var e = 0; e < all.length; e++) {                      if (all[e].className == className) {                          elements[elements.length] = all[e];                          break;                      }                  }                  return elements;              }   function startMove(obj, json, fnEnd){clearInterval(obj.timer);obj.timer=setInterval(function (){var allinposition=true;//假设所有的值都到了目标点for(var name in json){var iCur=0;//1.获取if(name=='opacity'){//iCur=parseFloat(getStyle(obj, name))*100;iCur=Math.round(parseFloat(getStyle(obj, name))*100);}else{iCur=parseInt(getStyle(obj, name));}var iSpeed=(json[name]-iCur)/12;iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);if(iCur!=json[name]){allinposition=false;}if(name=='opacity'){obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';obj.style.opacity=(iCur+iSpeed)/100;}else{obj.style[name]=iCur+iSpeed+'px';}}if(allinposition){clearInterval(obj.timer);if(fnEnd){fnEnd();}}}, 30);}//幻灯片基础类  function sliderFadeIn(obj){   this.containter=$(obj);   this.obj=this.containter.getElementsByTagName('ul')[0];   this.zIndex=0;   this.index=0;   this.autoPlay=true;   }     sliderFadeIn.prototype={  intialize:function(){  var _this=this;  this.hoverTimer=null;  this.outTimer=null;  this.sliderItem=this.obj.getElementsByTagName('li');  this.count=this.obj.getElementsByTagName('li').length;  for(var i=0;i<this.count; i++){  this.sliderItem[i].style.zIndex=-i;  }  //创建点击按钮   var ulBtn=document.createElement('ul');       ulBtn.setAttribute('class','ulBtn');   this.containter.appendChild(ulBtn);   for(var i=0;i<this.count; i++){   var ali=document.createElement('li');   ali.innerHTML=i+1;ulBtn.appendChild(ali)   }//为按钮绑定切换事件this.libtn=this.containter.getElementsByTagName('ul')[1].getElementsByTagName('li');   for(var j=0;j<this.libtn.length;j++){with({j:j})this.libtn[j].onmouseover=function(){clearTimeout( _this.outTimer); _this.hoverTimer=setTimeout(function(){  //延时300毫秒执行_this.autoPlay=false;this.className='on';_this.index=j;_this.fadeIn(_this.index);},200)}with({j:j})this.libtn[j].onmouseout=function(){clearTimeout(_this.hoverTimer);                                         _this.outTimer= setTimeout(function(){ _this.autoPlay=true;_this.index=j;_this.fadeIn(++_this.index)},3000)}//移入图片暂停 移出自动播放开始for (var x=0;x<this.sliderItem.length;x++){with({x:x})this.sliderItem[x].onmouseover=function(){clearTimeout(_this.outTimer);                        _this.autoPlay=false;}with({x:x})this.sliderItem[x].onmouseout=function(){ _this.outTimer= setTimeout(function(){ _this.autoPlay=true;_this.index=x;_this.fadeIn(++_this.index)},3000)}}   } this.fadeIn(0)         },  fadeIn:function(num){ if(this.timer){ clearTimeout(this.timer)};  this.index=num;  var _this=this;              if(num>this.count-1){this.index=num=0};  if(num<0){this.index=num=this.count-1};  //循环隐藏所有图片  for(var i=0;i<this.count;i++){  startMove( this.sliderItem[i], {opacity:0}); this.libtn[i].className='';    }               this.libtn[this.index].className='on';  this.sliderItem[this.index].style.zIndex=++this.zIndex;//提升zindex   startMove(this.sliderItem[this.index], {opacity:100});              //自动播放  if(this.autoPlay){  this.timer=setTimeout(function(){  _this.fadeIn(++_this.index)  },3000)}      },  next:function(){  this.fadeIn(++this.index)    },  prev:function(){    this.fadeIn(--this.index)  }    }</script><script type="text/javascript">var slider01=new sliderFadeIn('sliderfadeinContainer');    slider01.intialize();var slider02=new sliderFadeIn('sliderfadeinContainer2');    slider02.intialize();</script></body></html>