今天用jquery写了一个简单的图片横向动态展示,使用jquery极大的简化了js,对于jquery的初学者来说也容易理解。
【原理简述】
1、在此只添加了向右移动的按钮,添加向左的按钮的jquery代码,改变这些代码 if(page == page_count){
jq2.animate({left:'-0px'},'slow');
page = 1;
}else{
jq2.animate({left:'-0'+page*jqwidth},'slow');
page++;
};
2、使用animate()函数,jquery中的移动函数;
【源码】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery图片横向动态展示</title> <style> *{padding:0px; margin:0 auto;} ul{ list-style-type:none;} .container{ width:650px; height:290px; overflow:hidden; margin:30px auto 0px; position:relative;} .box{width:3000px; height:290px; position:absolute; top:0px; left:0px;} .box ul li{ float:left;} .next{ background:url(img/arrowLeft.jpg) no-repeat; width:40px; height:60px; position:absolute; right:15px; top:130px; cursor:pointer;} .smallPic{ position:absolute; top:270px; left:250px; } .smallPic ul{ } .smallPic ul li{ float:left; background:url(img/tip2.gif) no-repeat; width:7px; height:7px; margin:5px;} .smallPic ul li.current{ background:url(img/2.gif) no-repeat;} </style> <script type="text/javascript" src="http://zyx475324688.blog.163.com/blog/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var page =1; $(".next").click(function(){ var jq1 = $(this).parents(".container"); var jq2 = jq1.find(".box"); var jqwidth = jq1.width(); var page_count = jq2.find("li").length; if(!jq2.is(":animated")){ if(page == page_count){ jq2.animate({left:'-0px'},'slow'); page = 1; }else{ jq2.animate({left:'-0'+page*jqwidth},'slow'); page++; } var cur = page -1; $(".smallPic li").eq(cur).addClass("current").siblings().removeClass("current"); } }); }); </script> </head> <body> <div class="container"> <div class="box"> <ul> <li><a href="http://zyx475324688.blog.163.com/blog/#"><img src="http://zyx475324688.blog.163.com/blog/img/img2.jpg" /></a></li> <li><a href="http://zyx475324688.blog.163.com/blog/#"><img src="http://zyx475324688.blog.163.com/blog/img/img3.jpg" /></a></li> <li><a href="http://zyx475324688.blog.163.com/blog/#"><img src="http://zyx475324688.blog.163.com/blog/img/img4.jpg" /></a></li> <li><a href="http://zyx475324688.blog.163.com/blog/#"><img src="http://zyx475324688.blog.163.com/blog/img/img5.jpg" /></a></li> </ul> </div> <div class="next"> </div> <div class="smallPic"> <ul> <li class="current"></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html>
【效果展示】