js 3 D画像重畳回転切替
69935 ワード
今回自分で一回jsロジックの造作の练习をして、効果はyoukuのドラマのチャンネルの焦点図をまねるので、优酷なもとの効果の住所:http://tv.youku.com/
今日の練習結果のコード:
今日の練習結果のコード:
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title> </title>
6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
7 <script>
8 (function(){
9 $(function(){
10 //
11 var btnLeft=$('.btnLeft');//
12 var btnRight=$('.btnRight');//
13 var arrUl=$('#arrLi');
14 var arrLi=$('#arrLi>li');
15 var btnLi=$('#btnLi>li');
16 var arrSort=[];
17 var kai=true;//
18 // ， 2 ，
19 var pos=[
20 {width:'430px',height:'182px',left:'-430px',top:'55px',zindex:1,opacity:0},
21 {width:'530px',height:'224px',left:'0px',top:'22px',zindex:2,opacity:1},
22 {width:'640px',height:'270px',left:'275px',top:'0px',zindex:4,opacity:1},
23 {width:'530px',height:'224px',left:'660px',top:'22px',zindex:2,opacity:1},
24 {width:'430px',height:'182px',left:'1190px',top:'55px',zindex:1,opacity:0},
25 ]
26 /* ， li arrSort */
27 for(var i=0;i<5;i++){
28 $(arrLi[i]).css({
29 'width':pos[i].width,
30 'height':pos[i].height,
31 'left':pos[i].left,
32 'top':pos[i].top,
33 'z-index':pos[i].zindex,
34 'opacity':pos[i].opacity
35 });
36 }
37 var oPath=parseInt(arrLi.eq(2).attr('data-num'));
38 moveClass(oPath);
39 for(var i=0;i<5;i++){
40 arrSort.push(arrLi[i])
41 }
42 //
43 btnRight.on('click',function(){
44 // ， ，
45 if(kai){
46 kai=false;
47
48 doPrev();
49 setTimeout(function(){kai=true;},500);
50 // setTimeout ，
51 // bug,
52 }
53
54 });
55 //
56 btnLeft.on('click',function(){
57 // ， ，
58 if(kai){
59
60 kai=false;
61 doNext();
62
63 setTimeout(function(){kai=true;},500)
64 }
65
66 });
67 //btn
68 btnLi.on('click',function(){
69
70 var _index=$(this).index();
71 var _imgIndex=addCenter(_index);// ， index ， arrSort
72 switch(_imgIndex){
73 case 0:
74 for(var i=0;i<2;i++){
75 doNext();
76 }
77 break;
78 case 1:
79 doNext();
80 break;
81 case 2:
82 return;
83 break;
84 case 3:
85 doPrev();
86 break;
87 case 4:
88 for(var i=0;i<2;i++){
89 doPrev();
90 }
91 break;
92
93
94 }
95 });
96 //
97 function doPrev(){
98
99 arrSort.push(arrSort.shift());
100 doMove();
101 };
102 //
103 function doNext(){
104
105 arrSort.unshift(arrSort.pop());
106 doMove();
107
108 };
109 // , ， animate
110 function doMove(){
111 arrUl.append(arrSort);
112 for(var i=0;i<5;i++){
113 $(arrSort[i]).css('z-index',pos[i].zindex);
114 $(arrSort[i]).stop().animate({
115 'width':pos[i].width,
116 'height':pos[i].height,
117 'left':pos[i].left,
118 'top':pos[i].top,
119 'opacity':pos[i].opacity,
120 },500);
121 }
122 var _index=parseInt($(arrSort[2]).attr('data-num'));
123 moveClass(_index);
124 }
125 // btn class
126 function moveClass(oindex){
127 btnLi.removeClass('active');
128 btnLi.eq(oindex).addClass('active');
129 }
130 // ，
131 function addCenter(index){
132 var _imgIndex=0;
133 arrLi.each(function(){
134 var num=$(this).attr('data-num');
135 if(num==index){
136 _imgIndex=$(this).index();
137 }
138
139 });
140 return _imgIndex;
141 }
142 });
143 })()
144 </script>
145 </head>
146 <style>
147 *{margin:0;padding:0;}
148 li{list-style:none;}
149 .container{width:1190px;height:310px;margin:10px auto;position:relative;overflow:hidden;}
150 .btnLeft{width:275px;height:225px;position:absolute;left:0px;top:22px;z-index:3;background:url(http://res.mfs.ykimg.com/0510000051AD63E96714C04A1400547A) no-repeat 7px 89px;
151 cursor:pointer;z-index:6;}
152 .btnRight{width:275px;height:225px;position:absolute;right:0px;top:22px;z-index:3;background:url(http://res.mfs.ykimg.com/0510000051AD63F56714C04A1305CFEF) no-repeat 219px 89px;
153 cursor:pointer;z-index:6;}
154 .container ul{width:100%;height:270px;position:relative;}
155 .container ul li{position:absolute;width:0px;height:0px;left:595px;top:135px;overflow:hidden;box-shadow:1px 5px 3px #ccc;}
156 .container ul li img{width:100%;height:auto;}
157 .container ol{padding-left:552px;margin-top:10px;}
158 .container ol li{width:10px;height:10px;display:block;background:#ccc;border-radius:6px;margin:0px 3px;text-indent:-9999px;float:left;cursor:pointer;}
159 .container ol .active{background:#69aaec;}
160 </style>
161 <body>
162 <div class="container">
163 <span class="btnLeft"></span>
164 <span class="btnRight"></span>
165
166 <ul id="arrLi">
167 <li data-num="3"><a href="#"><img src="http://r4.ykimg.com/051000005458453B6737B36F870BBE71"/></a></li>
168 <li data-num="4"><a href="#"><img src="http://r3.ykimg.com/05100000544490016737B35A220433C1"/></a></li>
169 <li data-num="0"><a href="#"><img src="http://r1.ykimg.com/051000005469ACA06737B359A40BCB53"/></a></li>
170 <li data-num="1"><a href="#"><img src="http://r1.ykimg.com/05100000546022E46737B35DAC0A11F8"/></a></li>
171 <li data-num="2"><a href="#"><img src="http://r1.ykimg.com/051000005434B8006737B371DF016067"/></a></li>
172 </ul>
173 <ol id="btnLi">
174 <li class="active">0</li>
175 <li>1</li>
176 <li>2</li>
177 <li>3</li>
178 <li>4</li>
179 </ol>
180 </div>
181 </body>
182 </html>