山寨优酷频道首页的图片效果

  1 require(‘effect‘, function(S) {
  2     var now=3,total = S(‘img‘).size();
  3     S(‘#bottom_nav div‘).on(‘click‘,function(){
  4         var ref=S(this).attr(‘ref‘);
  5         if(now < ref){
  6             var rightAbs = ref - now;
  7             var leftAbs = now + total - ref;
  8         }else{
  9             var rightAbs =total -now + ref;
 10             var leftAbs =now - ref;
 11         }
 12         if(leftAbs < rightAbs){
 13              dir = "left";    
 14         }else{
 15              dir = "right";    
 16         }
 17         S(‘#slide div‘).css(‘zIndex‘,‘0‘);
 18         S("#slide div").anim({
 19             to : {
 20                 left : ‘585px‘,
 21                 marginTop : ‘135px‘,
 22                 width : ‘0px‘,
 23                 height : ‘0px‘,
 24                 opacity : 0
 25             },
 26             duration : 100
 27         });
 28         if(dir==‘right‘){
 29             slide.turn_page(parseInt(ref)-1,dir);
 30             now=parseInt(ref);
 31         }
 32         else {
 33             slide.turn_page(parseInt(ref)+1,dir);
 34             now=parseInt(ref);
 35         }
 36         S("#bottom_nav div:nth-child(‘"+ref+"‘)").addClass(‘buttomNavButtonOn‘);
 37     });
 38     S(‘#control_left‘).on(‘click‘, function() {
 39         slide.turn_page(now,‘left‘);
 40         S("#bottom_nav div:nth-child(‘"+slide.prev(now)+"‘)").addClass(‘buttomNavButtonOn‘);
 41         now=slide.prev(now);
 42     });
 43     S(‘#control_right‘).on(‘click‘, function() {
 44         slide.turn_page(now,‘right‘);
 45         S("#bottom_nav div:nth-child(‘"+slide.next(now)+"‘)").addClass(‘buttomNavButtonOn‘);
 46         now=slide.next(now);
 47     });
 48     var slide = (function() {
 49         var total = S(‘img‘).size();
 50         slide = {
 51             next : function(now) {
 52                 var next;
 53                 if (parseInt(now) + 1 > total)
 54                     next = 1;
 55                 else
 56                     next = now + 1;
 57                 return next;
 58             },
 59             prev : function(now) {
 60                 var prev;
 61                 if (parseInt(now) - 1 ==0)
 62                     prev = total;
 63                 else
 64                     prev = now - 1;
 65                 return prev;
 66             },
 67             turn_page : function(now,dir) {
 68                 S(‘#slide div‘).css(‘zIndex‘,‘0‘);
 69                 S(‘#bottom_nav div‘).removeClass(‘buttomNavButtonOn‘);
 70                 S("#slide div:nth-child(‘" + now + "‘)").css(‘zIndex‘,‘1‘);
 71                 if(dir==‘left‘){
 72                     S("#slide div:nth-child(‘" + this.next(now) + "‘)").css(‘zIndex‘,‘0‘);
 73                     S("#slide div:nth-child(‘" + this.prev(now) + "‘)").css(‘zIndex‘,‘2‘);
 74                     S("#slide div:nth-child(‘" +this.prev( this.prev(now)) + "‘)").css(‘zIndex‘,‘1‘);
 75                     S("#slide div:nth-child(‘" + now + "‘)").anim({
 76                         to : {
 77                             left : ‘660px‘,
 78                             marginTop : ‘23px‘,
 79                             width : ‘530px‘,
 80                             height : ‘224px‘,
 81                             opacity : 0.4
 82                         },
 83                         duration : 800
 84                     });
 85                     S("#slide div:nth-child(‘" + this.next(now) + "‘)").anim({
 86                         to : {
 87                             left : ‘1190px‘,
 88                             marginTop : ‘85px‘,
 89                             width : ‘530px‘,
 90                             height : ‘100px‘,
 91                             opacity : 0
 92                         },
 93                         complete : function() {
 94                             S(this).css(‘left‘, ‘-530px‘);
 95                         },
 96                         duration : 800
 97                     });
 98                     S("#slide div:nth-child(‘" + this.prev(now) + "‘)").anim({
 99                         to : {
100                             left : ‘275px‘,
101                             marginTop : ‘0px‘,
102                             width : ‘640px‘,
103                             height : ‘270px‘,
104                             opacity : 1
105                         },
106                         duration : 800
107                     });
108                     S("#slide div:nth-child(‘" +this.prev( this.prev(now)) + "‘)").anim({
109                         to : {
110                             left : ‘0px‘,
111                             marginTop : ‘23px‘,
112                             width : ‘530px‘,
113                             height : ‘224px‘,
114                             opacity : 0.4
115                         },
116                         duration : 800
117                     });            
118                 }else{
119                     S("#slide div:nth-child(‘" + this.next(now) + "‘)").css(‘zIndex‘,‘2‘);
120                     S("#slide div:nth-child(‘" + this.prev(now) + "‘)").css(‘zIndex‘,‘0‘);
121                     S("#slide div:nth-child(‘" +this.next( this.next(now)) + "‘)").css(‘zIndex‘,‘1‘);
122                     S("#slide div:nth-child(‘" +this.next( this.next(now)) + "‘)").css(‘left‘, ‘1190px‘);
123                     S("#slide div:nth-child(‘" + now + "‘)").anim({
124                         to : {
125                             left : ‘0px‘,
126                             marginTop : ‘23px‘,
127                             width : ‘530px‘,
128                             height : ‘224px‘,
129                             opacity : 0.4
130                         },
131                         duration : 800
132                     });
133                     S("#slide div:nth-child(‘" + this.next(now) + "‘)").anim({
134                         to : {
135                             left : ‘275px‘,
136                             marginTop : ‘0px‘,
137                             width : ‘640px‘,
138                             height : ‘270px‘,
139                             opacity : 1
140                         },
141                         duration : 800
142                     });
143                     S("#slide div:nth-child(‘" + this.prev(now) + "‘)").anim({
144                         to : {
145                             left : ‘-530px‘,
146                             marginTop : ‘85px‘,
147                             width : ‘530px‘,
148                             height : ‘100px‘,
149                             opacity : 0
150                         },
151                         duration : 800
152                     });
153                     S("#slide div:nth-child(‘" +this.next( this.next(now)) + "‘)").anim({
154                         to : {
155                             left : ‘660px‘,
156                             marginTop : ‘23px‘,
157                             width : ‘530px‘,
158                             height : ‘224px‘,
159                             opacity : 0.4
160                         },
161                         duration : 800
162                     });
163                 }
164             }
165         };
166         return slide;
167     })();
168 });

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript"
 7     src="http://localhost/cd/skipalong/seed.js"></script>
 8 <script type="text/javascript"
 9     src="http://localhost/cd/skipalong/slide.js"></script>
10 </head>
11 <body>
12     <div id=‘container‘>
13         <div id=‘bottom_nav‘>
14             <div class="bottomNavButtonOFF" ref=‘1‘></div>
15             <div class="bottomNavButtonOFF" ref=‘2‘></div>
16             <div class="bottomNavButtonOFF buttomNavButtonOn" ref=‘3‘></div>
17             <div class="bottomNavButtonOFF" ref=‘4‘></div>
18             <div class="bottomNavButtonOFF" ref=‘5‘></div>
19             <div class="bottomNavButtonOFF" ref=‘6‘></div>
20         </div>
21         <div id=‘slide‘>
22             <div
23                 style=‘width: 530px; height: 100px; opacity: 0; left: -530px; z-index: 0; margin-top: 85px;‘
24                 ref=‘1‘>
25                 <img src="img/1.jpeg">
26             </div>
27             <div
28                 style=‘width: 530px; height: 224px; opacity: 0.4; left: 0px; z-index: 1; margin-top: 23px;‘
29                 ref=‘2‘>
30                 <img src="img/2.jpeg">
31             </div>
32             <div
33                 style=‘width: 640px; height: 270px; opacity: 1; left: 275px; z-index: 2; margin-top: 0px;‘
34                 ref=‘3‘>
35                 <img src="img/3.jpeg">
36             </div>
37             <div
38                 style=‘width: 530px; height: 224px; opacity: 0.4; left: 660px; z-index: 1; margin-top: 23px;‘
39                 ref=‘4‘>
40                 <img src="img/4.jpeg">
41             </div>
42             <div
43                 style=‘width: 530px; height: 100px; opacity: 0; left: -530px; z-index: 0; margin-top: 85px;‘
44                 ref=‘5‘>
45                 <img src="img/5.jpeg">
46             </div>
47             <div
48                 style=‘width: 530px; height: 100px; opacity: 0; left: -530px; z-index: 0; margin-top: 85px;‘
49                 ref=‘6‘>
50                 <img src="img/6.jpeg">
51             </div>
52         </div>
53         <div id=‘banner_control‘>
54             <div id=‘control_left‘></div>
55             <div id=‘control_right‘></div>
56         </div>
57     </div>
58 </body>
59 </html>

 1 <style type="text/css">
 2 body,div,img {
 3     margin: 0;
 4     padding: 0;
 5 }
 6 
 7 #container {
 8     height: 310px;
 9     border: 1px solid red;
10     overflow: hidden;
11     position: relative;
12     width: 1190px;
13 }
14 
15 #slide,#banner_control,#slide div {
16     position: absolute;
17     cursor: pointer;
18 }
19 
20 img {
21     height: 100%;
22     width: 100%;
23 }
24 
25 #banner_control {
26     width: 100%;
27 }
28 
29 #control_left,#control_right {
30     position: absolute;
31     cursor: pointer;
32     height: 45px;
33     width: 45px;
34     z-index: 4;
35     top: 100px;
36     display: block;
37 }
38 
39 #control_left {
40     background-image: url(‘http://localhost/cd/img/control_left.png‘);
41     left: 7px;
42 }
43 
44 #control_right {
45     background-image: url(‘http://localhost/cd/img/control_right.png‘);
46     right: 7px;
47 }
48 
49 .bottomNavButtonOFF {
50     background: none repeat scroll 0 0 #C3C3C3;
51     border-radius: 5px 5px 5px 5px;
52     cursor: pointer;
53     display: inline-block;
54     height: 10px;
55     margin: 0 5px;
56     overflow: hidden;
57     vertical-align: top;
58     width: 10px;
59 }
60 
61 .buttomNavButtonOn {
62     background: none repeat scroll 0 0 #69AAEC;
63 }
64 
65 #bottom_nav {
66     height: 10px;
67     margin-top: 270px;
68     padding: 10px 0 0;
69     position: absolute;
70     text-align: center;
71     width: 100%;
72     z-index: 140;
73 }
74 </style>