banner滚动切换
最近有点闲,用jquery写了个banner滚动切换效果,为了提高扩展性,函数里增加了三个参数,支持class,方向(up,down,left,right)和每张图显示的时间.虽然说授人与鱼,不如授人与渔,只是自我感觉并没有太多的技巧,只是分析效果的每一个事件,然后给每一个事件加动作,在逻辑上肯定有自己没想到的,也肯定有更好的写法,欢迎一起探讨交流.
效果图:
html代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="stealer" /> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/scroll.css"> <title>banner滚动切换</title> </head> <body> <div class="banner"> <ul class="scroll"> <li><a href="#"><img src="images/120323_exchange_538x200.jpg" /></a></li> <li><a href="#"><img src="images/121017_qh_538x200.jpg" /></a></li> <li><a href="#"><img src="images/121019_d1_538x200.jpg" /></a></li> </ul> </div> <div class="banner"> <ul class="scroll"> <li><a href="#"><img src="images/120323_exchange_538x200.jpg" /></a></li> <li><a href="#"><img src="images/121017_qh_538x200.jpg" /></a></li> <li><a href="#"><img src="images/121019_d1_538x200.jpg" /></a></li> <li><a href="#"><img src="images/121017_qh_538x200.jpg" /></a></li> <li><a href="#"><img src="images/121019_d1_538x200.jpg" /></a></li> </ul> </div> </body> <script src="js/jquery-1.4.3.min.js"></script> <script src="js/stealer.js"></script> </html>
细心的话会发现这个效果不单单支持图片切换,因为换的是li,内容可以自己写.
css代码:
/* @Author stealer */ .banner{ width:538px; height:200px; border:1px solid #d7d7d7; position:relative; overflow:hidden; } .scroll-dot{ position:absolute; left:0; bottom:5px; width:100%; } .scroll-dot li{ display:inline-block; *display:inline; *zoom:1; margin:0 5px; width:10px; height:10px; } .scroll-dot a{ display:block; width:100%; height:100%; font:1px/1px Arial, Helvetica, sans-serif; border:1px solid #999; background:#ddd; border-radius:5px; cursor:pointer; } .scroll-dot a.hover{ background:#aaa; } .scroll-dot a.active{ background:#ff0; }
jquery代码:
1 /* @Author stealer */ 2 function Slide(obj,direction,speed){//obj是class名,direction是方向(支持up,down,left,right),speed滚动速度(毫秒为单位).down有个小问题,图片是倒叙来依次显示. 3 $("."+obj).each(function(){ 4 var S=$(this); 5 var content=$(this).children(".scroll"); 6 var top=parseInt(content.css("margin-top")); 7 var left=parseInt(content.css("margin-left")); 8 var t; 9 var n=0;//计数,第几个 10 $(this).append(function(){ 11 var html="<li><a class='active'></a></li>"; 12 for(var i=1;i<content.children("li").length;i++){ 13 html+="<li><a></a></li>"; 14 } 15 return("<ul class='scroll-dot'>"+html+"</ul>"); 16 }) 17 $(".scroll-dot a").hover(function(){ 18 $(this).toggleClass("hover"); 19 }); 20 var dot=$(this).children(".scroll-dot").children().children("a"); 21 if(direction=="up"){ 22 function scroll(){ 23 top=parseInt(content.css("margin-top")); 24 top-=content.children("li").height(); 25 n+=1; 26 if(-top>=content.height()){ 27 content.animate({marginTop:0},500,function(){ 28 n=0; 29 dot.removeClass("active"); 30 dot.eq(n).addClass("active"); 31 t=setTimeout(function(){scroll()},speed); 32 }); 33 } 34 else{ 35 content.animate({marginTop:top},500,function(){ 36 dot.removeClass("active"); 37 dot.eq(n).addClass("active"); 38 t=setTimeout(function(){scroll()},speed); 39 }); 40 } 41 } 42 } 43 if(direction=="down"){ 44 content.css({"margin-top":-content.children("li").height()*(content.children("li").length-1)}); 45 function scroll(){ 46 top=parseInt(content.css("margin-top")); 47 top+=content.children("li").height(); 48 n+=1; 49 if(top>0){ 50 content.animate({marginTop:-content.children("li").height()*(content.children("li").length-1)},500,function(){ 51 n=0; 52 dot.removeClass("active"); 53 dot.eq(n).addClass("active"); 54 t=setTimeout(function(){scroll()},speed); 55 }); 56 } 57 else{ 58 content.animate({marginTop:top},500,function(){ 59 dot.removeClass("active"); 60 dot.eq(n).addClass("active"); 61 t=setTimeout(function(){scroll()},speed); 62 }); 63 } 64 } 65 } 66 if(direction=="left"){ 67 content.css({"width":content.children("li").width()*content.children("li").length}); 68 content.children("li").css({"float":"left"}); 69 function scroll(){ 70 left=parseInt(content.css("margin-left")); 71 left-=content.children("li").width(); 72 n+=1; 73 if(-left>=content.width()){ 74 content.animate({marginLeft:0},500,function(){ 75 n=0; 76 dot.removeClass("active"); 77 dot.eq(n).addClass("active"); 78 t=setTimeout(function(){scroll()},speed); 79 }); 80 } 81 else{ 82 content.animate({marginLeft:left},500,function(){ 83 dot.removeClass("active"); 84 dot.eq(n).addClass("active"); 85 t=setTimeout(function(){scroll()},speed); 86 }); 87 } 88 } 89 } 90 if(direction=="right"){ 91 content.css({"width":content.children("li").width()*content.children("li").length,"margin-left":content.children("li").width()*(1-content.children("li").length)}); 92 content.children("li").css({"float":"right"}); 93 function scroll(){ 94 left=parseInt(content.css("margin-left")); 95 left+=content.children("li").width(); 96 n+=1; 97 if(left>0){ 98 content.animate({marginLeft:-content.children("li").width()*(content.children("li").length-1)},500,function(){ 99 n=0; 100 dot.removeClass("active"); 101 dot.eq(n).addClass("active"); 102 t=setTimeout(function(){scroll()},speed); 103 }); 104 } 105 else{ 106 content.animate({marginLeft:left},500,function(){ 107 dot.removeClass("active"); 108 dot.eq(n).addClass("active"); 109 t=setTimeout(function(){scroll()},speed); 110 }); 111 } 112 } 113 } 114 $(this).mouseover(function(){ 115 clearInterval(t); 116 dot.each(function(e){ 117 $(this).click(function(){ 118 var that=$(this); 119 if(direction=="up"){ 120 top=-parseInt(content.children("li").height())*e; 121 content.stop().animate({marginTop:top},500); 122 } 123 else if(direction=="down"){ 124 top=parseInt(content.children("li").height())*(e-content.children("li").length+1); 125 content.stop().animate({marginTop:top},500); 126 } 127 else if(direction=="left"){ 128 left=-parseInt(content.children("li").width())*e; 129 content.stop().animate({marginLeft:left},500); 130 } 131 else if(direction=="right"){ 132 left=parseInt(content.children("li").width())*(e-content.children("li").length+1); 133 content.stop().animate({marginLeft:left},500); 134 } 135 dot.removeClass("active"); 136 that.addClass("active"); 137 n=e; 138 }); 139 }); 140 }); 141 $(this).mouseout(function(){ 142 t=setTimeout(function(){scroll()},speed); 143 }); 144 t=setTimeout(function(){scroll()},speed); 145 }); 146 } 147 $(document).ready(function () { 148 Slide("banner","right",3000);//示例 149 });
