jquery实现图片向上滑动效果

By luo, on 七月 5th, 2010

今天写的jquery实现图片向上滑动效果，代码很简洁

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jquery图片滑动效果TOP</title> <style type="text/css"> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} small{font-size:12px;} ul,ol{list-style:none;} a{text-decoration:none;} a:hover{text-decoration:underline;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} #box{width:586px; height:150px; overflow:hidden; position:relative; margin:0 auto;} #slider{ position:absolute;} #slider li{ font-size:0px;} #num{ position:absolute; right:5px; bottom:5px;} #num span{ color:#FFF; display:inline-block; background-color:#666666; padding:0 6px; margin:0 2px; font-weight:bold; cursor:pointer;} #num .on{ background-color:#FF6537; padding:2px 8px;} </style> <script src="http://www.uedspace.com/zuopin/js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var len = $("#num > span").length; var index = 0; $("#num > span").mouseover(function(){ index = $("#num > span").index(this); showImg(index); }); //鼠标滑入box区域停止动画，滑出开始动画 $("#box").hover(function(){ if(MyTime){ clearInterval(MyTime); } },function(){ MyTime = setInterval(function(){ showImg(index); index++; if(index == len){index=0} },2000); }); //每隔两秒切换一张图片 var MyTime = setInterval(function(){ showImg(index); index++; if(index == len){index=0} },2000); }); //通过控制css top 的值来显示不同的图片 function showImg(i){ $("#slider").stop(true,false).animate({top:-150*i},600); $("#num > span").eq(i).addClass("on").siblings().removeClass("on"); } </script> </head> <body> <div id="box"> <ul id="slider"> <li><img src="http://www.uedspace.com/zuopin/images/1.gif" width="586" height="150" alt="1" /></li> <li><img src="http://www.uedspace.com/zuopin/images/2.gif" width="586" height="150" alt="2" /></li> <li><img src="http://www.uedspace.com/zuopin/images/3.gif" width="586" height="150" alt="3" /></li> </ul> <div id="num"> <span class="on">1</span> <span>2</span> <span>3</span> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

UEDspace

jquery实现图片向上滑动效果

3 comments to jquery实现图片向上滑动效果

Leave a Reply

最新文章

文章索引模板

最近评论

友情链接

功能

UEDspace

jquery实现图片向上滑动效果

3 comments to jquery实现图片向上滑动效果

Leave a Reply

最新文章

热门标签

文章索引模板

最近评论

友情链接

功能