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方法，他增加了各种对象的事件添加方法。呵呵，结束……
