效果：
转载请注明出处：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 : 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 butt
新闻热点
疑难解答
