模仿京东商城的一个图片轮播

图片轮播是一个很常见的业务需求，很多地方都会出现，譬如京东商城首页上就有这么一个，今天我又再次模仿一个，不过今天要用原型模式来写，可是发现自己还是领悟的不够好，希望各位批评指点。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片轮播</title>
    <style>
        .cl:after{content: "";font-size: 0px;display: block;clear: both;}
        .cl{zoom:1;}
        .cl-l{float: left;}
        .lunbo{margin: 0 auto;width: 550px;height:240px;border: 1px solid #CDCDCD;position: relative;}
        .select{position: absolute;display:inline-block;width: 210px;height: 30px;top: 210px;left: 350px;}
        .select a{display: block;float:left;width: 22px;height: 22px;margin-right: 10px;border: 1px solid #cdcdcd;border-radius: 12px 12px 12px 12px;background: #cdcdcd;text-align: center;}
        a.curr{background: red;}
    </style>
</head>
<body>
<div class="lunbo">
    <div class="pic cl"><img src="../css/1.jpg"></div>
    <div class="select cl cl-l"><a class="curr">1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a></div>
</div>
<script>
  function play(index,selectArray,showArea,images,interval){
        this.index=index;
        this.selectArray=selectArray;
        this.showArea=showArea;
        this.images=images;
        this.interval=interval;
   }
    play.prototype={
     constructor:play,
     start:function(){
         var ind=this.index;
         this.removeClass();
         this.addClass();
         this.showArea.src=this.images[ind];
         this.index++;
         if(this.index==6)   this.index=0;
     },
     init:function(){
         _this=this;
           for(var i=0;i<_this.selectArray.length;i++){
           this.selectArray.ind=i;
           this.selectArray[i].onmouseover=function(){
               _this.stop();
           };
          this.selectArray[i].onmouseout=function(){
              _this.next();
          };
         }
         this.interval= setInterval(function(){
             _this.start()
         },2000)
    },
     stop:function(event){
         clearInterval(this.interval);
         var event=event||window.event;
         var target=event.target? event.target:event.srcElement;
         this.index=target.innerText-1;
         this.removeClass();
         this.addClass();
         this.showArea.src=this.images[this.index];
     },
      next:function(){
          _this=this;
          this.interval= setInterval(function(){
              _this.start()
          },2000)
      },
      removeClass:function(){
          document.getElementsByClassName("curr")[0].className="";
      },
      addClass:function(){
      this.selectArray[this.index].className+="curr";
       }
   }

  var selectArray=document.getElementsByTagName("a");
  var showArea=document.getElementsByTagName("img")[0];
  var images=["../css/1.jpg","../css/2.jpg","../css/3.jpg","../css/4.jpg","../css/5.jpg","../css/6.jpg"];
  var interval=undefined;
  var obj=new play(1,selectArray,showArea,images,interval);
    obj.init();
</script>
</body>
</html>

 

 






            

            
posted @ 
2012-11-07 13:30 
黑暗骑士之“闪” 
阅读(1628) 
评论(0) 
 
收藏 
举报