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

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

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

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

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

代码结构如下：

<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].οnmοuseοver=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].οnmοuseοut=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].οnmοuseοver=function(){clearTimeout(_this.outTimer);_this.autoPlay=false;}with({x:x})this.sliderItem[x].οnmοuseοut=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;//提升zindexstartMove(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>

淡入淡出的图片轮显幻灯片类相关推荐

html图片轮播代码渐隐,js淡入淡出的图片轮播效果代码分享
本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示: ...
html图片自动切换的幻灯片效果的,js带点自动图片轮播幻灯片特效代码分享
本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:--- ...
一步一步教你写淡入淡出带注释的图片轮播插件（一）
前几天在blueIdea上看到一个淡入淡出的带注释的图片轮播效果http://bbs.blueidea.com/thread-2911266-1-1.html看了帖子作者的代码,虽然效果达到了,但是有 ...
针对淡入淡出的定时轮播效果js
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...
在html中如何设置图片轮显,css中怎么让图片轮播？
css中让图片轮播的方法:将多个大小相同的图片横排放在一个图片中,然后在图片容器外加一个展示容器,并为图片容器添加自定义动画,在动画不同阶段设置递增的偏移值即可实现图片轮播. css让图片轮播实现思想 ...
网页轮显幻灯片 php,dedecms 织梦幻灯片/轮播图管理插件
插件描述幻灯片有大图和小图有多组功能可以本地上传可以站内选项可以远程下载图片调用标签 {dede:flash typeid='1' row='10' titlelen='255'} 自增变 ...
HTML+CSS+JS实现 ❤️图片轮播幻灯片❤️
效果演示: 文末获取源码代码目录: 主要代码实现: CSS样式: @font-face {font-weight: normal;font-style: normal; }.csslider1 { ...
[Js]淡入淡出的图片
效果:鼠标移入时,图片由半透明逐渐变成清晰,移出时,由清晰变为半透明分析:用变量来储存透明度,因为元素.style.alpha不能直接增加或减少 window.οnlοad=function(){ ...
vue实现轮播图（淡入淡出呼吸效果）
Vue简简单单实现淡入淡出轮播图效果,不依赖任何第三方插件或组件,开箱即用,欢迎C+V. 主页里还有无缝滚动.跑马灯轮播图,地址如下:https://blog.csdn.net/m0_59224033 ...

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

淡入淡出的图片轮显幻灯片类相关推荐

最新文章

热门文章