仿优酷频道首页的图片切换效果
效果：
转载请注明出处：http://www.cnblogs.com/TheViper/p/4027766.html
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>
S是自己的类库，和jquery差不多，函数看名字都知道是啥意思
