面向物件實現多圖輪播效果

面向物件程式設計 · 發表 2018-09-22 15:34:00

摘要： 1.靜態頁面的搭建 1 <body> 2<div class="wrap" id="wrap"> 3<div id="wrap_bg"> 4...

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"><</div>
73<div id="right_btn">></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){
2cv = cv || 'linear';
3var startVal={};
4var endVal={};
5for(var key in mjson){
6startVal[key]=parseInt(getStyle(obj,key));
7endVal[key]=parseInt(mjson[key]);
8}
9var startTime=new Date();
 10
 11//alert(typeof startVal);
 12//console.log(startVal);
 13var timer=setInterval(function(){
 14var t=new Date()-startTime;//經過了多長時間
 15var d=time;//持續時間
 16
 17if(t>=d){
 18t=d;
 19clearInterval(timer);
 20}
 21for (var key in mjson){
 22var b=startVal[key];//初始值
 23var c=endVal[key]-b;//變化量
 24var s=Tween[cv](t,b,c,d);
 25obj.style[key]=s+"px";
 26}
 27if(t==d){
 28callback && callback.call(obj);
 29}
 30//obj.style[attr]=s+"px";
 31//console.log(obj.style[attr]);
 32},13)
 33 
 34//獲取樣式方法（對於IE和非IE瀏覽器做了相容）
 35function getStyle(obj,attr){
 36return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
 37}
 38 };
 39 var Tween = {
 40/*
 41t:當前時間
 42b:初始值
 43c:變化量
 44d:持續時間
 45*/
 46linear: function (t, b, c, d){//勻速
 47return c*t/d + b;
 48},
 49easeIn: function(t, b, c, d){//加速曲線
 50return c*(t/=d)*t + b;
 51},
 52easeOut: function(t, b, c, d){//減速曲線
 53return -c *(t/=d)*(t-2) + b;
 54},
 55easeBoth: function(t, b, c, d){//加速減速曲線
 56if ((t/=d/2) < 1) {
 57return c/2*t*t + b;
 58}
 59return -c/2 * ((--t)*(t-2) - 1) + b;
 60},
 61easeInStrong: function(t, b, c, d){//加加速曲線
 62return c*(t/=d)*t*t*t + b;
 63},
 64easeOutStrong: function(t, b, c, d){//減減速曲線
 65return -c * ((t=t/d-1)*t*t*t - 1) + b;
 66},
 67easeBothStrong: function(t, b, c, d){//加加速減減速曲線
 68if ((t/=d/2) < 1) {
 69return c/2*t*t*t*t + b;
 70}
 71return -c/2 * ((t-=2)*t*t*t - 2) + b;
 72},
 73elasticIn: function(t, b, c, d, a, p){//正弦衰減曲線（彈動漸入）
 74if (t === 0) { 
 75return b; 
 76}
 77if ( (t /= d) == 1 ) {
 78return b+c; 
 79}
 80if (!p) {
 81p=d*0.3; 
 82}
 83if (!a || a < Math.abs(c)) {
 84a = c; 
 85var s = p/4;
 86} else {
 87var s = p/(2*Math.PI) * Math.asin (c/a);
 88}
 89return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 90},
 91elasticOut: function(t, b, c, d, a, p){//正弦增強曲線（彈動漸出）
 92if (t === 0) {
 93return b;
 94}
 95if ( (t /= d) == 1 ) {
 96return b+c;
 97}
 98if (!p) {
 99p=d*0.3;
100}
101if (!a || a < Math.abs(c)) {
102a = c;
103var s = p / 4;
104} else {
105var s = p/(2*Math.PI) * Math.asin (c/a);
106}
107return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
108},
109elasticBoth: function(t, b, c, d, a, p){
110if (t === 0) {
111return b;
112}
113if ( (t /= d/2) == 2 ) {
114return b+c;
115}
116if (!p) {
117p = d*(0.3*1.5);
118}
119if ( !a || a < Math.abs(c) ) {
120a = c; 
121var s = p/4;
122}
123else {
124var s = p/(2*Math.PI) * Math.asin (c/a);
125}
126if (t < 1) {
127return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
128Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
129}
130return a*Math.pow(2,-10*(t-=1)) * 
131Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
132},
133backIn: function(t, b, c, d, s){//回退加速（回退漸入）
134if (typeof s == 'undefined') {
135s = 1.70158;
136}
137return c*(t/=d)*t*((s+1)*t - s) + b;
138},
139backOut: function(t, b, c, d, s){
140if (typeof s == 'undefined') {
141s = 3.70158;//回縮的距離
142}
143return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
144}, 
145backBoth: function(t, b, c, d, s){
146if (typeof s == 'undefined') {
147s = 1.70158; 
148}
149if ((t /= d/2 ) < 1) {
150return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
151}
152return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
153},
154bounceIn: function(t, b, c, d){//彈球減振（彈球漸出）
155return c - Tween['bounceOut'](d-t, 0, c, d) + b;
156},
157bounceOut: function(t, b, c, d){
158if ((t/=d) < (1/2.75)) {
159return c*(7.5625*t*t) + b;
160} else if (t < (2/2.75)) {
161return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
162} else if (t < (2.5/2.75)) {
163return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
164}
165return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
166},
167bounceBoth: function(t, b, c, d){
168if (t < d/2) {
169return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
170}
171return 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){
 2this.Ul=obj.getElementsByTagName('ul')[0];
 3this.width=parseInt(getStyle(obj,'width'));
 4this.index=1;//圖片序號,控制Ul的移動距離
 5}
 6//原型
 7Banner.prototype={
 8init:function(){
 9var This = this;
10move(This.Ul,{marginLeft:-This.width*This.index},500,function(){
11if(This.index==oTabLi.length+1){
12// console.log(-This.width);
13this.style.marginLeft=-This.width+'px';
14This.index=1;
15}
16else if(This.index==0){
17this.style.marginLeft=-This.width*oTabLi.length+'px';
18This.index=oTabLi.length;
19}
20});
21},
22}
23//建構函式，初始化物件
24var banner_bg=new Banner(wrap_bg);
25var banner_left=new Banner(wrap_left);
26var banner_right1=new Banner(wrap_right1);
27var banner_right2=new Banner(wrap_right2);
28var banner_right3=new Banner(wrap_right3);
29var banners=[banner_bg,banner_left,banner_right1,banner_right2,banner_right3];

構造輪播圖物件


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

初始化

點選標籤序號，實現輪播


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

View Code

點選左右按鈕實現輪播


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

View Code

自動輪播


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

View Code

提取輪播變化的方法，提高重複利用


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

View Code

滑鼠進入輪播圖停止輪播，離開輪播圖開始輪播


1 /*滑鼠進入，停止輪播 */
2oWrapMain.onmouseenter=function(){
3clearInterval(timer);
4}
5/*滑鼠離開，繼續輪播 */
6oWrapMain.onmouseleave=function(){
7auto();
8 }

View Code