面向对象实现多图轮播效果

本文主要是介绍面向对象实现多图轮播效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.静态页面的搭建

 1 <body> 2     <div class="wrap" id="wrap"> 3         <div id="wrap_bg"> 4             <ul>                5                 <li><img src="image/img_bg/img_bg_5.jpg"></img></li> 6                 <li><img src="image/img_bg/img_bg_1.jpg"></img></li> 7                 <li><img src="image/img_bg/img_bg_2.jpg"></img></li> 8                 <li><img src="image/img_bg/img_bg_3.jpg"></img></li> 9                 <li><img src="image/img_bg/img_bg_4.jpg"></img></li>10                 <li><img src="image/img_bg/img_bg_5.jpg"></img></li>11                 <li><img src="image/img_bg/img_bg_1.jpg"></img></li>12                 13             </ul>14         </div>15         <div id="wrap_main">16             <div id="wrap_main_left">17                 <ul>18                     <li><img src="image/img_lt/img_lt_5.jpg"></img></li>19                     <li><img src="image/img_lt/img_lt_1.jpg"></img></li>20                     <li><img src="image/img_lt/img_lt_2.jpg"></img></li>21                     <li><img src="image/img_lt/img_lt_3.jpg"></img></li>22                     <li><img src="image/img_lt/img_lt_4.jpg"></img></li>23                     <li><img src="image/img_lt/img_lt_5.jpg"></img></li>24                     <li><img src="image/img_lt/img_lt_1.jpg"></img></li>25                 </ul>26             </div>27             <div id="wrap_main_right">28                 <div id="wrap_main_right_1">29                     <ul>30                         <li><img src="image/img_gt_1/img_gt_1_5.jpg"></img></li>31                         <li><img src="image/img_gt_1/img_gt_1_1.jpg"></img></li>32                         <li><img src="image/img_gt_1/img_gt_1_2.jpg"></img></li>33                         <li><img src="image/img_gt_1/img_gt_1_3.jpg"></img></li>34                         <li><img src="image/img_gt_1/img_gt_1_4.jpg"></img></li>35                         <li><img src="image/img_gt_1/img_gt_1_5.jpg"></img></li>36                         <li><img src="image/img_gt_1/img_gt_1_1.jpg"></img></li>37                     </ul>38                 </div>39                 <div id="wrap_main_right_2">40                     <ul>41                         <li><img src="image/img_gt_2/img_gt_2_5.jpg"></img></li>42                         <li><img src="image/img_gt_2/img_gt_2_1.jpg"></img></li>43                         <li><img src="image/img_gt_2/img_gt_2_2.jpg"></img></li>44                         <li><img src="image/img_gt_2/img_gt_2_3.jpg"></img></li>45                         <li><img src="image/img_gt_2/img_gt_2_4.jpg"></img></li>46                         <li><img src="image/img_gt_2/img_gt_2_5.jpg"></img></li>47                         <li><img src="image/img_gt_2/img_gt_2_1.jpg"></img></li>48                     </ul>49                 </div>50                 <div id="wrap_main_right_3">51                     <ul>              52                         <li><img src="image/img_gt_3/img_gt_3_5.jpg"></img></li>        53                         <li><img src="image/img_gt_3/img_gt_3_1.jpg"></img></li>54                         <li><img src="image/img_gt_3/img_gt_3_2.jpg"></img></li>55                         <li><img src="image/img_gt_3/img_gt_3_3.jpg"></img></li>56                         <li><img src="image/img_gt_3/img_gt_3_4.jpg"></img></li>57                         <li><img src="image/img_gt_3/img_gt_3_5.jpg"></img></li>58                         <li><img src="image/img_gt_3/img_gt_3_1.jpg"></img></li>59                     </ul>60                 </div>61             </div>62             <div id="tab">63                 <ul>64                     <li class="on"></li>65                     <li></li>66                     <li></li>67                     <li></li>68                     <li></li>69                 </ul>70             </div>71             <div id="btn">72                 <div id="left_btn">&lt</div>73                 <div id="right_btn">&gt</div>74             </div>75         </div>76     </div>77     <script src="js/newMove.js"></script>78     <script src="js/index.js"></script>79 </body>

View Code

@charset 'utf-8';
*{margin: 0;padding: 0;
}li{list-style: none;border: none;
}img{border: none;
}body{width: 1680px;  
   
}.wrap{width: 100%;height: 552px;margin-top: 100px;position: relative;
    
}/*start bg*/#wrap_bg{width: 100%;height: 490px;  
    background: green;position: absolute;top: 0;   
}#wrap_bg ul{width: 700%;margin-left: -100%;
}#wrap_bg ul li{   
    width: 1680px;height: 100%;float: left;
}/*end bg*//*start main*/#wrap_main{width: 1200px;height: 500p;position: absolute;left: 180px;top: 50px;
}/*start main_left*/#wrap_main_left{width: 600px;height: 500px;overflow: hidden;z-index: 3;
}#wrap_main_left ul{width: 700%;height: 100%;   
    margin-left: -600px;
}#wrap_main_left ul li{width: 600px;height: 500px;float: left;   
}/*end main_left*//*start main_right*/#wrap_main_right{width: 600px;height:500px;position: absolute;left: 600px;top:0;
   
    z-index: 0;
}/*start main_right_1*/#wrap_main_right_1{width: 100%;height: 250px;overflow: hidden;
}#wrap_main_right #wrap_main_right_1 ul{width: 700%;height: 100%;margin-left: -600px;
}#wrap_main_right #wrap_main_right_1 ul li{width: 600px;height: 250px;float: left;
}/*end main_right_1*//*start main_right_2*/#wrap_main_right #wrap_main_right_2{width: 300px;height: 250px;position: absolute;left: 0;top: 250px;overflow: hidden;
}#wrap_main_right #wrap_main_right_2 ul{width: 700%;height: 100%;   
    margin-left: -300px;
}#wrap_main_right #wrap_main_right_2 ul li{width: 300px;height: 250px;float: left;
}/*end main_right_2*//*start main_right_3*/#wrap_main_right #wrap_main_right_3{width: 300px;height: 250px;position: absolute;left: 300px;top: 250px;overflow: hidden;
}#wrap_main_right #wrap_main_right_3 ul{width: 700%;height: 100%;   
    margin-left: -300px;
}#wrap_main_right #wrap_main_right_3 ul li{width: 300px;height: 250px;float: left;
}/*end main_right_3*//*start tab*/#tab{width: 90px;height: 15px;position: absolute;top: 465px;left: 50%;margin-left: -45px;    
    cursor: pointer;
}#tab ul{width: 86px;height: 15px;  
}#tab ul li{   
    width: 10px;height: 10px;margin:2px 3px;background: #999;border-radius: 100%;float: left;
}#tab ul .on{background: #fb921e;  
}/*end tab*//*start btn*/#btn div{width: 30px;height: 36px;background: #6e6e6e; 
    font-size: 20px;font-weight: bold;text-align: center;color: #fff;position: absolute;top: 50%;margin-top: -18px;cursor: pointer;
}#left_btn{   
    left: 0;
}#right_btn{right: 0;
}/*end btn*//*end main*/

View Code

静态页面搭建比较简单，主要是靠定位来实现

效果图：

2.js封装时间版运动框架

  1 function move(obj,mjson,time,callback,cv){  2     cv = cv || 'linear';  3     var startVal={};  4     var endVal={};  5     for(var key in mjson){  6         startVal[key]=parseInt(getStyle(obj,key));  7         endVal[key]=parseInt(mjson[key]);  8     }  
  9     var startTime=new Date(); 10      11     //alert(typeof startVal); 12     //console.log(startVal); 13     var timer=setInterval(function(){ 14         var t=new Date()-startTime;//经过了多长时间                    15         var d=time;//持续时间 16          17         if(t>=d){ 18             t=d; 19             clearInterval(timer); 20         } 21         for (var key in mjson){ 22             var b=startVal[key];//初始值 23             var c=endVal[key]-b;//变化量 24             var s=Tween[cv](t,b,c,d); 25             obj.style[key]=s+"px"; 26         } 27         if(t==d){ 28             callback && callback.call(obj); 29         } 30         //obj.style[attr]=s+"px"; 31         //console.log(obj.style[attr]); 32     },13) 33  34     //获取样式方法（对于IE和非IE浏览器做了兼容） 35     function getStyle(obj,attr){ 36         return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; 37     } 38 }; 39 var Tween = { 40     /* 41     t:当前时间 42     b:初始值 43     c:变化量 44     d:持续时间 45     */ 46     linear: function (t, b, c, d){  //匀速 47         return c*t/d + b; 48     }, 49     easeIn: function(t, b, c, d){  //加速曲线 50         return c*(t/=d)*t + b; 51     }, 52     easeOut: function(t, b, c, d){  //减速曲线 53         return -c *(t/=d)*(t-2) + b; 54     }, 55     easeBoth: function(t, b, c, d){  //加速减速曲线 56         if ((t/=d/2) < 1) { 57             return c/2*t*t + b; 58         } 59         return -c/2 * ((--t)*(t-2) - 1) + b; 60     }, 61     easeInStrong: function(t, b, c, d){  //加加速曲线 62         return c*(t/=d)*t*t*t + b; 63     }, 64     easeOutStrong: function(t, b, c, d){  //减减速曲线 65         return -c * ((t=t/d-1)*t*t*t - 1) + b; 66     }, 67     easeBothStrong: function(t, b, c, d){  //加加速减减速曲线 68         if ((t/=d/2) < 1) { 69             return c/2*t*t*t*t + b; 70         } 71         return -c/2 * ((t-=2)*t*t*t - 2) + b; 72     }, 73     elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线（弹动渐入） 74         if (t === 0) { 
 75             return b; 
 76         } 77         if ( (t /= d) == 1 ) { 78             return b+c; 
 79         } 80         if (!p) { 81             p=d*0.3; 
 82         } 83         if (!a || a < Math.abs(c)) { 84             a = c; 
 85             var s = p/4; 86         } else { 87             var s = p/(2*Math.PI) * Math.asin (c/a); 88         } 89         return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 90     }, 91     elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线（弹动渐出） 92         if (t === 0) { 93             return b; 94         } 95         if ( (t /= d) == 1 ) { 96             return b+c; 97         } 98         if (!p) { 99             p=d*0.3;100         }101         if (!a || a < Math.abs(c)) {102             a = c;103             var s = p / 4;104         } else {105             var s = p/(2*Math.PI) * Math.asin (c/a);106         }107         return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;108     },    
109     elasticBoth: function(t, b, c, d, a, p){110         if (t === 0) {111             return b;112         }113         if ( (t /= d/2) == 2 ) {114             return b+c;115         }116         if (!p) {117             p = d*(0.3*1.5);118         }119         if ( !a || a < Math.abs(c) ) {120             a = c; 
121             var s = p/4;122         }123         else {124             var s = p/(2*Math.PI) * Math.asin (c/a);125         }126         if (t < 1) {127             return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
128                     Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;129         }130         return a*Math.pow(2,-10*(t-=1)) * 
131                 Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;132     },133     backIn: function(t, b, c, d, s){     //回退加速（回退渐入）134         if (typeof s == 'undefined') {135         s = 1.70158;136         }137         return c*(t/=d)*t*((s+1)*t - s) + b;138     },139     backOut: function(t, b, c, d, s){140         if (typeof s == 'undefined') {141             s = 3.70158;  //回缩的距离142         }143         return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;144     }, 
145     backBoth: function(t, b, c, d, s){146         if (typeof s == 'undefined') {147             s = 1.70158; 
148         }149         if ((t /= d/2 ) < 1) {150             return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;151         }152         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;153     },154     bounceIn: function(t, b, c, d){    //弹球减振（弹球渐出）155         return c - Tween['bounceOut'](d-t, 0, c, d) + b;156     },       
157     bounceOut: function(t, b, c, d){158         if ((t/=d) < (1/2.75)) {159             return c*(7.5625*t*t) + b;160         } else if (t < (2/2.75)) {161             return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;162         } else if (t < (2.5/2.75)) {163             return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;164         }165         return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;166     },      
167     bounceBoth: function(t, b, c, d){168         if (t < d/2) {169             return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;170         }171         return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;172     }173 };

View Code

这个运动框架是让轮播图动起来的核心。这个核心的动画框架其实并不复杂，主要是靠定时器，让图片的位置属性不断变化，只要保证定时器的间隔时间足够小，使得肉眼看不出卡顿。这里介绍一下运功框架中5个参数意思。

obj：对象（让哪个对象动）
mjson：｛属性：目标位置｝（有时候，满足运动条件的属性不止一个，所以这里用json对象来做参数）
time：运动的时间（从起始位置到目标位置所需时间）
callback：运动完后的回调函数
cv：运动类型（直线、曲线等，这里默认的是直线)

轮播图其实就是让图片列表 ul 整体在规定的时间内向左或者向有移动。

3.js使用面向对象思想实现轮播

在这个项目中，总共有5组图片，4组内容图和1组背景图，那么如果采用面向对象的思想去解决的话，找这5组图片轮播时公共的特性。当点击左右按钮或者下面的序列标签时，五组图片同时轮播，那么这里面的话就可以将轮播动画写在原型中。五组图片的私有属性就是各自的图片下标。这里本来我是五组共享一个下标的，但后来这样子无法实现轮播，后来思考下来，觉得肉眼看上去是同时轮播的，但是其实代码执行的过程中，还是有时间先后的，所以可能导致改变下标引起了混乱。

 1 function Banner(obj){ 2         this.Ul=obj.getElementsByTagName('ul')[0]; 3         this.width=parseInt(getStyle(obj,'width')); 4         this.index=1;//图片序号,控制Ul的移动距离 5     } 6     //原型 7     Banner.prototype={ 8         init:function(){ 9             var This = this;10             move(This.Ul,{marginLeft:-This.width*This.index},500,function(){11                 if(This.index==oTabLi.length+1){12                     // console.log(-This.width);13                     this.style.marginLeft=-This.width+'px';                   
14                     This.index=1;15                 }   
16                 else if(This.index==0){17                     this.style.marginLeft=-This.width*oTabLi.length+'px';18                     This.index=oTabLi.length;19                 }    
20             });21         },22     }23     //构造函数，初始化对象24     var banner_bg=new Banner(wrap_bg);25     var banner_left=new Banner(wrap_left);26     var banner_right1=new Banner(wrap_right1);27     var banner_right2=new Banner(wrap_right2);28     var banner_right3=new Banner(wrap_right3);29     var banners=[banner_bg,banner_left,banner_right1,banner_right2,banner_right3];

构造轮播图对象

 1     var oWrapMain=document.getElementById('wrap_main'); 2     var wrap_bg=document.getElementById("wrap_bg"); 3     var wrap_left=document.getElementById("wrap_main_left"); 4     var wrap_right1=document.getElementById("wrap_main_right_1"); 5     var wrap_right2=document.getElementById("wrap_main_right_2"); 6     var wrap_right3=document.getElementById("wrap_main_right_3"); 7     var oBtnLi=document.getElementById('btn').getElementsByTagName('div'); 8     var oLeftBtn=document.getElementById('left_btn'); 9     var oRightBtn=document.getElementById('right_btn');10     var oTab=document.getElementById('tab');11     var oTabLi=oTab.getElementsByTagName('li');12 13     14     var sort=0;//Tab序号15     var timer;16     var nowTime=0;

初始化

点击标签序号，实现轮播

 1 for(var i=0;i<oTabLi.length;i++){ 2         oTabLi[i].index=i;      
 3         oTabLi[i].onclick=function(){   
 4             oTabLi[sort].className='';   
 5             sort=this.index;   
 6             for(var j=0;j<banners.length;j++){ 7                 banners[j].index=this.index+1; 8             } 
 9             change();10         }11  }

View Code

点击左右按钮实现轮播

 1 oLeftBtn.onclick=function(){ 2         //防止点击过快，出现画面抽搐，所以规定一个时间间隔 3         var clickTime=new Date(); 4         if(clickTime-nowTime > 500){ 5             nowTime=clickTime; 6             oTabLi[sort].className='';          
 7             sort--; 8             if(sort<0){ 9                 sort=oTabLi.length-1;  
10             }  
11             for(var j=0;j<banners.length;j++){12                banners[j].index--;13             }                    
14             change();15         }      
16     }17     oRightBtn.onclick=function(){18         var clickTime=new Date();19         //避免点击过快，出现画面抽搐现象20         if(clickTime-nowTime > 500){21             nowTime=clickTime;22             oTabLi[sort].className='';          
23             sort++;24             sort%=oTabLi.length;25             for(var j=0;j<banners.length;j++){26                banners[j].index++;27             }  
28             change();29         } 
30 31 }

View Code

自动轮播

 1 /*自动轮播 */ 2     function auto(){ 3         timer=setInterval(function(){ 4             oTabLi[sort].className=''; 5             sort++; 6             sort%=oTabLi.length; 7             for(var j=0;j<banners.length;j++){ 8                banners[j].index++; 9             }   
10             change();11         },3000)12 }

View Code

提取轮播变化的方法，提高重复利用

1  /*变化*/2     function change(){      
3         oTabLi[sort].className='on';4          for(var j=0;j<banners.length;j++){5             banners[j].init();6         } 
7 }

View Code

鼠标进入轮播图停止轮播，离开轮播图开始轮播

1 /*鼠标进入，停止轮播 */2     oWrapMain.onmouseenter=function(){3         clearInterval(timer);4     }5     /*鼠标离开，继续轮播 */6     oWrapMain.onmouseleave=function(){7         auto();8 }

View Code