今天用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{ 650px; height:290px; overflow:hidden; margin:30px auto 0px; position:relative;}
.box{3000px; height:290px; position:absolute; top:0px; left:0px;}
.box ul li{ float:left;}
.next{ background:url(img/arrowLeft.jpg) no-repeat; 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; 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>
【效果展示】
