jQuery左右滚动。

一个左右滚动的图片展示，有左右按钮，可以点击。
这个案例是我参考《锋利的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的认识更加深入。
下面的是整个案例的代码下载地址：