Js幻灯片展示播放效果

  上次的jQuery幻灯片播放效果使用jQuery做的，这次我们再尝试用原生的js做一个，嘿嘿

  还是老一套，先是html和css，如下：

 

<div id="slidBox">
	<ul>
		<li>
			<a href="http://www.baidu.com" target="_blank"><img src="1.jpg" title="百度" alt="百度" /></a>
		</li>
		<li>
			<a href="http://www.google.cn" target="_blank"><img src="2.jpg" title="谷歌" alt="谷歌" /></a>
		</li>
		<li>
			<a href="http://www.bing.com" target="_blank"><img src="3.jpg" title="必应" alt="必应" /></a>
		</li>
		<li>
			<a href="http://www.youdao.com" target="_blank"><img src="4.jpg" title="有道" alt="有道" /></a>
		</li>				
	</ul>
	<p>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<span></span>
	</p>
</div>

body{font-size:12px; background-color:#FFF; text-align:center;}
#page{ width:950px; margin:0 auto; text-align:left;}
a,a:link,a:visited,a:hover,a:active{text-decoration:none;}
p,a img,ul,li{margin:0; padding:0;}
a img{ border:none; }
ul,li{list-style-type:none;}

#slidBox{padding:4px; width:410px; height:324px; border:1px solid red;}
#slidBox  ul li{ float:left; padding:1px;}
#slidBox  ul li img{ width:203px; height:160px; display:block;}
#slidBox ul.slidBoxImages{ width:410px; height:300px; overflow:hidden; }
#slidBox ul.slidBoxImages li{position:relative; width:410px; height:300px; top:0; left:0; }
#slidBox ul.slidBoxImages li img{width:410px; height:300px;}
#slidBox p{ background:#F5F5F5; height:18px; line-height:18px; margin-top:2px; padding:2px 10px; font-weight:bold; position:relative; display:none;}
#slidBox p span{float:right; margin-right:60px;}
#slidBox p a { display:block; width:18px; height:18px; background:transparent url(t1.jpg) no-repeat; position:relative; left:4px; float:left;}
#slidBox p a.current{background-image:url(t2.jpg);}

这次使用的是ul li 保存图片，而且定义了在没有js的情况下图片的展示效果，保证用户禁用js之后还能让图片正常展示：

 

禁用了js的显示效果：

使用js的效果：

哈哈，看着还不错。下面我们来说最主要的东西：js，嘿嘿，代码如下：

function getTarget(e){//获得事件源
　　  var target=e?e.target:(window.event?window.event.srcElement:null);
	if(!target){return null;}
	while(target.nodeType!=1&&target.nodeName.toLowerCase()!="body"){target=target.parentNode;}
	return target;
}
var slideImages={
	//公共变量
	"slideBoxId":"",
	"dynamicClass":"",
	"IntervalSpeed":4000,
	"nowPosition":0,
	
	"liList":null,				//图片列表
	"pointerList":null,			//幻灯片下方的指示器列表
	"slideIntro":null,			//各个大图的说明
	"interval":null,			//幻灯片轮转
	
	"init":function(slideBoxId,dynamicClass,IntervalSpeed){
		if(!document.getElementById||!document.createTextNode) {return;}
		if(!dynamicClass||!slideBoxId){return;}
		
		slideImages.slideBoxId=slideBoxId;										//图片幻灯片容器id
		slideImages.dynamicClass=dynamicClass;									//变换后的类名
		slideImages.IntervalSpeed=(!IntervalSpeed)?slideImages.IntervalSpeed:IntervalSpeed;	//轮换的时间间隔
		slideImages.nowPosition=Math.floor(Math.random()*4);					//指示现在所轮换到的图片
		
		//得到幻灯片容器，并且为函数中经常使用的变量赋值
		var targetObj=document.getElementById(slideImages.slideBoxId);			//幻灯片容器
		if(!targetObj){return;}
		var slideUl=targetObj.getElementsByTagName("ul");		
		if(!slideUl){return;}	
		slideImages.liList=slideUl[0].getElementsByTagName("li");				//得到图片集合li
		if(!slideImages.liList){return;}
		var slideP=targetObj.getElementsByTagName("p");
		if(!slideP){return;}
		slideImages.pointerList=slideP[0].getElementsByTagName("a");			//得到指示器集合a
		if(!slideImages.pointerList){return;}
		slideImages.slideIntro=slideP[0].getElementsByTagName("span");
		if(!slideImages.slideIntro){return;}
		slideImages.slideIntro=slideImages.slideIntro[0];						//得到说明性文字span
				
		for(var i=0;i<slideImages.liList.length;i++){							//隐藏其他的图片,显示nowPosition指示的那一张图片
			if(i!=slideImages.nowPosition) slideImages.liList[i].style.display="none";
		}
		slideP[0].style.display="block";
		slideImages.pointerList[slideImages.nowPosition].className="current";
		slideImages.slideIntro.innerHTML=slideImages.liList[slideImages.nowPosition].getElementsByTagName("img")[0].getAttribute("title");
		
		slideUl[0].className=slideImages.dynamicClass;							//改变图片的显示状态
		slideImages.interval=setInterval(slideImages.playIt,slideImages.IntervalSpeed);
		slideImages.addPointerMouseEvent();										//添加鼠标事件
	},
	//工具方法	
	"getPointerIndex":function(pointer){										//得到特定指示器的位置
		for(var i=0;i<slideImages.pointerList.length;i++){
			if(slideImages.pointerList[i]==pointer){return i;}
		}
		return -1;
	},
	"mouseOverPointer":function (e){											//鼠标放在特定的指示器上面
		clearInterval(slideImages.interval);
		slideImages.liList[slideImages.nowPosition].style.display="none";		//隐藏上一个
		
		var pointer=getTarget(e);
		var index=slideImages.getPointerIndex(pointer);
		slideImages.pointerList[slideImages.nowPosition].className="";
		slideImages.nowPosition=(index-1+4)%4;
		slideImages.playIt();
	},
	"mouseOutPointer":function (e){												//鼠标离开指示器
		slideImages.interval=setInterval(slideImages.playIt,slideImages.IntervalSpeed);
	},
	"playIt":function (){														//播放幻灯片
		slideImages.liList[slideImages.nowPosition].style.display="none";		//隐藏上一个
		slideImages.pointerList[slideImages.nowPosition].className="";
		
		slideImages.nowPosition=(slideImages.nowPosition+1)%4;					//显示下一个
		slideImages.liList[slideImages.nowPosition].style.display="";
		slideImages.pointerList[slideImages.nowPosition].className="current";	//改变指示器和说明文字
		slideImages.slideIntro.innerHTML=slideImages.liList[slideImages.nowPosition].getElementsByTagName("img")[0].getAttribute("title");										
	},
	"addPointerMouseEvent":function (){											//添加指示器鼠标事件
		for(var i=0;i<slideImages.pointerList.length;i++){
			slideImages.pointerList[i].onmouseover=slideImages.mouseOverPointer;
			slideImages.pointerList[i].onmouseout=slideImages.mouseOutPointer;
		}
	}
};
slideImages.init("slidBox","slidBoxImages");

 

  唉，真是的，jQuery的几代码就搞定的东西现在我们用js写的话就用近百行代码啦，哈哈，不过原生的js的代码执行的效率快得多，毕竟少了jQuery这个框架。

  首先是这个getTarget方法，用来获得一个事件的事件源，获取事件源ie和其他的浏览器有不同的方法，ie的是window.event.secElement，而其他的浏览器是e.target就行了，嘿嘿。

  这次主要使用了一个js对象slideImages来保存使用到的方法，最最主要的方法就是init方法，他增加了各种对象的事件添加方法。呵呵，结束……