一个左右滚动的图片展示，有左右按钮，可以点击。
这个案例是我参考《锋利的jQuery》一书中的案例，代码少，适合新手提升，代码里有详细的注释。
这个案例有个缺点，就是不能自动切换，不过对于掌握了jQuery基本语法的初学者，想提高自己的技能，这是个很好的案例。
下面是css样式： 

[color=blue][color=blue]body {font-size:12px;color:#000;font-family:Verdana, Geneva, sans-serif;background:#FFF} 

* {margin:0;padding:0;} 

div,ul,li,ol,dt,dd,dl,p {overflow:hidden;margin:0;padding:0;font-size:12px} 

ul,li {list-style:none;} 

img {border:none} 

a {text-decoration:none;color:#000} 

a:hover {text-decoration:underline} 

.v_show {width:320px;margin-left:200px;margin-top:100px;border:red solid 1px} 

.v_caption {height:30px} 

h2 {float:left} 

.highlight_tip {float:left} 

.change_btn {float:left;margin-left:20px} 

.change_btn span {cursor:pointer} 

.current {color:#00F} 

.v_content {width:320px;height:60px;overflow:hidden;position:relative} 

.v_content_list {width:800px;position:relative} 

.v_content_list ul {float:left} 

.v_content_list li {float:left;width:80px}[/color][/color] 


这里面应该注意overflow:hidden ,position:relative 这两个属性，overflow：hidden把多出这个区域的部分给隐藏；对于animate()这个自定义动画的方法，必须给相关的div一个position属性才可能使div移动，因为div默认的是static，这个是固定的，不可移动的。 



[color=darkred]var page = 1; 

 var i = 4; //每版放4个图片 

 //向后 按钮 

 $("span.next").click(function(){ //绑定click事件 

 var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素 

 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域” 

 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素 

 var v_width = $v_content.width() ; 

 var len = $v_show.find("li").length; 

 var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数 

 if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画 

 if( page == page_count ){ //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。 

 $v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面 

 page = 1; 

 }else{ 

 $v_show.animate({ left : '-='+v_width }, "slow"); //通过改变left值，达到每次换一个版面 

 page++; 

 } 

 } 

 $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); 

 });[/color] 


上面的是向后按钮的代码。 

代码定义了一个page变量作为中间媒介，用它来判断相关图片的位置； 


下面的是向前按钮的代码，跟向后的按钮代码相似： 


[color=darkred]$("span.prev").click(function(){ 

 var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素 

 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域” 

 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素 

 var v_width = $v_content.width(); 

 var len = $v_show.find("li").length; 

 var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数 

 if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画 

 if( page == 1 ){ //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。 

 $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow"); 

 page = page_count; 

 }else{ 

 $v_show.animate({ left : '+='+v_width }, "slow"); 

 page--; 

 } 

 } 

 $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); 

 });[/color]




这个案例只要仔细研究，一般的话都可以看懂的。研究懂了会对你对jQuery的认识更加深入。