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 : 1105                         },106                         duration : 800107                     });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.4115                         },116                         duration : 800117                     });            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.4130                         },131                         duration : 800132                     });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 : 1140                         },141                         duration : 800142                     });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 : 0150                         },151                         duration : 800152                     });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.4160                         },161                         duration : 800162                     });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             <div23                 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             <div28                 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             <div33                 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             <div38                 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             <div43                 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             <div48                 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>