图片轮播原生js面对对象封装版

axl234

浏览: 260071 次
性别:
来自: 北京

最近访客更多访客>>

ShaLongBus

398466028

54931104

qq22903594

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

<!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.onmouseover=function()
   {
    clearInterval($this.play);
   }
   box.onmouseout=function()
   {
    $this.autoplay($this.index);
   }
   for(var i=0;i<numlist.length;i++)
   {
    numlist[i].index=i;
    numlist[i].onmouseover=function(){
     $this.imgshow(this.index,$this.numlist,$this.imglist);
    }
   }
  }
}
window.onload=function(){
  var runimg=new runImg();
  runimg.count=3;
  runimg.imgurl=[
  "<img src=\"http://i.mmcdn.cn/simba/img/T117eTXmXqXXXXXXXX.jpg\"/>",
  "<img src=\"http://img03.taobaocdn.com/tps/i3/T1t8eTXbBtXXXXXXXX-490-170.png\"/>",
  "<img src=\"http://i.mmcdn.cn/simba/img/T1OVOUXeNjXXXXXXXX.jpg\"/>"];
  runimg.info("#box");
  runimg.action("#box");
}
</script>
</head>
<body>

</body>
</html>

分享到：

12个很棒的jQuery选择器扩展 | IE和Firefox中css和javascript的23个不同 ...

2012-03-14 16:50
浏览 1000
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论