图片轮播原生js面对对象打包版
日期：2014-05-16 浏览次数：20385 次
<!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=utf-8" />
<title>轮播原生js面对对象封装版</title>
<style>
body, ul, li, p{margin: 0;padding: 0;}
ul{list-style-type:none;}
body{font-family:"Times New Roman", Times, serif;}
#box{position:relative;width:492px;height:172px;margin:10px auto;}
#box .imgList{position:relative;width:490px;height:170px;overflow:hidden;}
#box .imgList li{position:absolute;top:0;left:0;width:490px;height:170px;}
#box .countNum{position:absolute;right:0;bottom:5px;}
#box .countNum li{width:20px;height:20px;float:left;color:#fff;border-radius:20px;background:#f90;text-align:center;margin-right:5px;cursor:pointer;opacity:0.7;filter:alpha(opacity=70);}
#box .countNum li.current{background:#f60;font-weight:bold;opacity:1;filter:alpha(opacity=70);}
</style>
<script>
?function runImg(){}?
?//使用原型对象增加runImg的属性和方法
?runImg.prototype={//初始化变量
??bigbox:null,//最外层容器
??boxul:null,//子容器ul
??imglist:null,//子容器img
??numlist:null,//子容器countNum
??index:0,//当前显示项
??timer:null,//控制图片转变效果
??play:null,//控制自动播放
??imgurl:[],//存放图片
??count:0,//存放的个数
??//定义$方法
??$:function(obj)
??{
???if(typeof(obj)=="string")
???{
????if(obj.indexOf("#")>=0)
????{
?????obj=obj.replace("#","");
?????if(document.getElementById(obj))
?????{
??????return document.getElementById(obj);
?????}
?????else
?????{
??????alert("没有容器"+obj);
??????return null;
?????}?
????}
????else
????{
?????return document.createElement(obj);
????}
???}
???else
???{
????return obj;
???}
??},
??//初始化
??info:function(id)
??{
???this.count=this.count<=5?this.count:5;
???this.bigbox=this.$(id);//最外层容器对象
???//创建两个ul一个放图片 一个放数字标识1，2，3
???for(var i=0;i<2;i++)
???{
????var ul=this.$("ul");
????for(var j=1;j<=this.count;j++)
????{
?????var li=this.$("li");
?????li.innerHTML=i==0?this.imgurl[j-1]:j;
?????ul.appendChild(li);
????}
????this.bigbox.appendChild(ul);
????
???}
???this.boxul=this.bigbox.getElementsByTagName("ul");
???this.boxul[0].className="imgList";//图片列表
???this.boxul[1].className="countNum";//数字列表
???this.imglist=this.boxul[0].getElementsByTagName("li");
???this.numlist=this.boxul[1].getElementsByTagName("li");
???this.numlist[0].className="current";//第一个数字为当前的
??},
??//封装程序入口
??action:function(id)
??{
???this.autoplay();
???this.mouseoverout(this.bigbox,this.numlist);
??},
??//图片切换效果
??imgshow:function(num,numlist,imglist)
??{
???this.index=num;
???var alpha=0;
???for(var i=0;i<numlist.length;i++)
???{
????numlist[i].className="";
???}
???numlist[this.index].className="current";
???clearInterval(this.timer);
???for(var j=0;j<imglist.length;j++)
???{
????imglist[j].style.opacity=0;
????imglist[j].style.filter="alpha(opacity=0)";
???}
???var $this=this;
???//利用透明度来实现切换图片
???this.timer=setInterval(function(){
????alpha+=2;
????if(alpha>100){alpha=100};//不能大于100
????//为兼容性赋样式
????imglist[$this.index].style.opacity=alpha/100;
????imglist[$this.index].style.filter="alpha(opacity="+alpha+")";
????if(alpha==100){clearInterval($this.timer)};//当等于100的时候就切换完成了
???},20)//经测试20是我认为最合适的值
??},
??//自动播放
??autoplay:function(){
???var $this=this;
???this.play=setInterval(function(){
????$this.index++;
????if($this.index>$this.imglist.length-1){$this.index=0};//播放到最后 重新开始
????$this.imgshow($this.index,$this.numlist,$this.imglist);
????},2000)
??},
??//处理鼠标事件
??mouseoverout:function(box,numlist)
??{
???var $this=this;
???box.onmouse
