原生js轮播图（面向对象）

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>轮播图</title>
 7         <link rel="stylesheet" href="Carousel.css" />
 8     </head>
 9 
10     <body>
11         <div class="wrap">
12             <div class="Carousel">
13                 <ul class="designShow">
14                     <li class="designStyle"><img src="img/carousel-01.png"></li>
15                     <li><img src="img/carousel-02.png"></li>
16                     <li><img src="img/carousel-03.png"></li>
17                     <li><img src="img/carousel-04.png"></li>
18                     <li><img src="img/carousel-05.png"></li>
19                     <li><img src="img/carousel-06.png"></li>
20                     <li><img src="img/carousel-08.png"></li>
21                     <li><img src="img/carousel-07.png"></li>
22                 </ul>
23                 <ol class="designDot">
24                     <li class="actdot"></li>
25                     <li></li>
26                     <li></li>
27                     <li></li>
28                     <li></li>
29                     <li></li>
30                     <li></li>
31                     <li></li>
32                 </ol>
33                 <div class="designBtn">
34                     <span class="left">&lt;</span>
35                     <span class="right">&gt;</span>
36                 </div>
37             </div>
38         </div>
39         <script src="Carousel.js"></script>
40     </body>
41 
42 </html>

carousel.css

  1 * {
  2     margin: 0;
  3     padding: 0;
  4 }
  5 
  6 ul,
  7 li {
  8     list-style: none;
  9 }
 10 
 11 .wrap {
 12     width: 790px;
 13     margin: 50px auto;
 14 }
 15 
 16 .Carousel {
 17     width: 790px;
 18     height: 340px;
 19     overflow: hidden;
 20     position: relative;
 21     float: left;
 22     margin-left: 10px;
 23     margin-bottom: 10px;
 24 }
 25 
 26 .Carousel .designShow {
 27     width: 790;
 28     height: 340px;
 29     position: relative;
 30 }
 31 
 32 .Carousel .designShow li {
 33     width: 790px;
 34     height: 340px;
 35     cursor: pointer;
 36     position: absolute;
 37     opacity: 0;
 38     filter: alpha(opacity=0);
 39     transition: all 0.5s linear;
 40 }
 41 
 42 .Carousel .designShow .designStyle {
 43     opacity: 1;
 44     filter: alpha(opacity=100);
 45 }
 46 
 47 .Carousel .designShow li img {
 48     border: 0;
 49     width: 790px;
 50     height: 340px;
 51     cursor: pointer;
 52 }
 53 
 54 .Carousel .designDot {
 55     width: 128px;
 56     height: 12px;
 57     padding-left: 3px;
 58     padding-right: 3px;
 59     padding-top: 2px;
 60     position: absolute;
 61     left: 50%;
 62     margin-left: -67px;
 63     bottom: 20px;
 64     background: rgba(244, 244, 244, .2);
 65     border-radius: 8px;
 66 }
 67 
 68 .Carousel .designDot li {
 69     width: 10px;
 70     height: 10px;
 71     margin-right: 3px;
 72     margin-left: 3px;
 73     border-radius: 50%;
 74     float: left;
 75     background: rgba(244, 244, 244, .4);
 76     cursor: pointer;
 77 }
 78 
 79 .Carousel .designDot .actdot {
 80     background: orange;
 81 }
 82 
 83 .Carousel .designBtn span {
 84     width: 26px;
 85     font-size: 26px;
 86     height: 40px;
 87     line-height: 40px;
 88     position: absolute;
 89     top: 50%;
 90     color: white;
 91     text-align: center;
 92     margin-top: -20px;
 93     display: none;
 94     background: rgba(100, 100, 100, .5);
 95     cursor: pointer;
 96 }
 97 
 98 .Carousel .designBtn .right {
 99     right: 0;
100 }

carousel.js

  1 function Carousel(json){
  2     // 声明变量
  3     this.oObjParent = document.querySelector(json.objParent);
  4     this.oRightArrow = document.querySelector(json.right);
  5     this.oLeftArrow = document.querySelector(json.left);
  6     this.aObj = document.querySelectorAll(json.obj);
  7     this.aDot = document.querySelectorAll(json.dot);
  8     this.oWrap = document.querySelector(json.wrap);
  9     this.len = this.aObj.length;
 10     this.dotName = json.dotname;
 11     this.objName = json.objname;
 12     this.time = json.time;
 13     this.CarouselIndex = 0;
 14     this.CarouselTimer = 0;
 15     this.init(this.CarouselIndex);
 16     this.mouseControl();
 17     this.autoPlay(this.CarouselIndex);
 18 }
 19 // 编号初始化
 20 Carousel.prototype.init = function(index){
 21     this.Moveobj(index);
 22 }
 23 // 鼠标移动，样式切换
 24 Carousel.prototype.Moveobj = function(index){
 25     for(var i = 0;i < this.len;i++){
 26             this.aDot[i].classList.remove(this.dotName);
 27             this.aObj[i].classList.remove(this.objName);
 28         }
 29         this.aDot[(index + this.len) % this.len].classList.add(this.dotName);
 30         this.aObj[(index + this.len) % this.len].classList.add(this.objName);
 31 }
 32 Carousel.prototype.mouseControl = function(){
 33     var that = this;
 34     // 圆点切换
 35     for(var i = 0; i < this.len; i++){
 36         this.aDot[i].index = i;
 37         this.aDot[i].onmouseover = function(){
 38             // 关闭定时器
 39             clearInterval(that.CarouselTimer);
 40             that.CarouselIndex = this.index;
 41             that.Moveobj(that.CarouselIndex);
 42             // 开启定时器
 43             that.autoPlay(that.CarouselIndex);
 44         }
 45     }
 46     // 点击右箭头
 47     this.oRightArrow.onclick = function(){
 48         clearInterval(that.CarouselTimer);
 49         that.CarouselIndex++;
 50         if(that.CarouselIndex == this.len + 1){
 51             that.CarouselIndex = 1;
 52         }
 53         that.Moveobj(that.CarouselIndex);
 54         that.autoPlay(that.CarouselIndex);
 55     }
 56     // 点击左箭头
 57     this.oLeftArrow.onclick = function(){
 58         clearInterval(that.CarouselTimer);
 59         that.CarouselIndex--;
 60         if(that.CarouselIndex == -2){
 61             that.CarouselIndex = this.len - 2;
 62         }
 63         that.Moveobj(that.CarouselIndex);
 64         that.autoPlay(that.CarouselIndex);
 65     }
 66     // 轮播父级函数
 67     this.oObjParent.onmouseover = function(){
 68         clearInterval(that.CarouselTimer);
 69     };
 70     this.oObjParent.onmouseout = function(){
 71         that.autoPlay(that.CarouselIndex);
 72     }
 73     // 箭头显示/隐藏
 74     if(this.oWrap){
 75         var that = this;
 76         this.oWrap.onmouseover = function(){
 77             that.oLeftArrow.style.display = "block";
 78             that.oRightArrow.style.display = "block";
 79         };
 80         this.oWrap.onmouseout = function(){
 81             that.oLeftArrow.style.display = "none";
 82             that.oRightArrow.style.display = "none";
 83         };
 84     }
 85 }
 86 // 设置定时器
 87 Carousel.prototype.autoPlay = function(){
 88     var that = this;
 89     that.CarouselTimer = setInterval(function(){
 90         that.CarouselIndex++;
 91         that.Moveobj(that.CarouselIndex);
 92     },that.time);
 93 };
 94 var carousel = new Carousel({
 95                 objParent: ".designShow",    //获取图片父级
 96                 right: ".designBtn .right",    //获取右箭头
 97                 left: ".designBtn .left",    //获取左箭头
 98                 obj: ".designShow li",        //获取图片li
 99                 dot: ".designDot li",        //获取圆点li
100                 dotname: "actdot",            //圆点切换样式
101                 objname: "designStyle",        //图片切换样式
102                 wrap: ".Carousel",            //获取ul父级
103                 time: 2000                    //定时器时间
104             });

备注：图片是790*340，使用了面向对象的方法来实现

posted on 2017-11-07 10:31 邂逅在人海阅读(116) 评论(0) 编辑收藏举报