动感图片标题的焦点图切换_图片特效特效

动感焦点图切换，标题和简短的图片介绍也是动感的，整体看上去很有灵气，本代码对于学习JavaScript的朋友来说，当作一款学习的参考代码也是适合的，好好研究一下吧。

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-type" mrc="text/html; charset=utf-8" />
<title>动感图片标题的焦点图切换</title>
<style type="text/css">
#fader{position:relative;overflow:hidden;height:300px;width:500px}
#fader li{position:absolute;left:0;top:0;}
ul,li{list-style:none;margin:0;padding:0}
img{display:block;}
.fader-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
.fader-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
</style>
<script type="text/javascript">
var Hongru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
Hongru.fader = function(){
	function init(anchor,options){
		this.anchor = anchor;
		var wp = H$(options.id),
			ul = H$$('ul',wp)[0],
			li = this.li = H$$('li',ul);
		this.index = options.position?options.position:0;
		this.a = options.auto?options.auto:2;
		this.cur = this.z = 0;
		this.l = li.length;
		this.img = [];
		for(var k=0;k<this.l;k++){
			this.img.push(H$$('img',this.li[k])[0]);
		}
		this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav';
		nav_wp = document.createElement('div');
		nav_wp.id = 'fader-nav';
		nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;';
		var alt = this.alt = document.createElement('p');
		for(var i=0;i<this.l;i++){
			this.li[i].o = 100;
			//setOpacity(this.li[i],this.li.o);
			this.li[i].style.opacity = this.li[i].o/100;
			this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')';
			//绘制控制器
			var nav = document.createElement('a');
			nav.className = options.navClass?options.navClass:'fader-nav';
			nav.innerHTML = i+1;
			nav.onclick = new Function(this.anchor+'.pos('+i+')');
			nav_wp.appendChild(nav);
		}
		wp.appendChild(alt);		
		wp.appendChild(nav_wp);
		this.textH = nav_wp.offsetHeight;
				alt.style.cssText = 'color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);';
				alt.style.height = alt.style.lineHeight = this.textH+'px';
		this.pos(this.index);
	}
	init.prototype={
		auto:function(){
			this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*1000); 
		},
		move:function(i){
			var n = this.cur+i;
			var m = i==1?n==this.l?0:n:n<0?this.l-1:n;
			this.pos(m);
		},
		pos:function(i){
			clearInterval(this.li.a);
			clearInterval(this.li[i].f);
			var curLi = this.li[i];
			this.z++;
			curLi.style.zIndex = this.z;
			this.alt.style.zIndex = this.z+1;
			nav_wp.style.zIndex = this.z+2;
			this.li.a=false; //这句话是必要的
			this.cur = i;
			//setOpacity(curLi[i],0);
			if(this.li[i].o>=100){
				this.li[i].o = 0;
				curLi.style.opacity = 0;
				curLi.style.filter = 'alpha(opacity=0)';
				this.alt.style.height = '0px';
			}
			for(var x=0;x<this.l;x++){
				nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav';
				}
			this.alt.innerHTML = this.img[i].alt;
			this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20);
		},
		fade:function(i){
		var p=this.li[i];
			if(p.o>=100){
				clearInterval(p.f);
				if(!this.li.a){ //一定要在这里做个是否已经clearInterval的判断，要不然在快速点击的时候会导致图片不停地闪
					this.auto();
				}
			}
			else{
				p.o+=5;
				//setOpacity(this.li[i],this.li[i].o);
				p.style.opacity = p.o/100;
				p.style.filter = 'alpha(opacity='+p.o+')';
				this.alt.style.height = Math.ceil(p.o*this.textH/100)+'px';
			}
		}
	};
	return {init:init};
}();
</script>
</head>
<body>
<div id="fader">
	<ul>
		<li><img src="http://p1.mb5u.com/texiao/1/20110225160603668.jpg" alt="我是图片一" /></li>
		<li><img src="http://p1.mb5u.com/texiao/1/20110225160603669.jpg" alt="哈哈，图片二" /></li>
		<li><img src="http://p1.mb5u.com/texiao/1/20110225160603670.jpg" alt="这是图片三" /></li>
		<li><img src="http://p1.mb5u.com/texiao/1/20110225160603671.jpg" alt="哈哈，图片四" /></li>
		<li><img src="http://p1.mb5u.com/texiao/1/20110225160603672.jpg" alt="图片五来咯" /></li>
	</ul>
</div>
<script type="text/javascript">
var fader = new Hongru.fader.init('fader',{
	id:'fader'
});
</script>
</body>
</html>

所属频道：图片特效特效/更新时间：2012-11-06

[收藏][报错][返回列表]

动感图片标题的焦点图切换_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些