使用jQuery实现图片滑动窗

使用原生Javascript实现貌似很有难度，于是先用jQuery实现，理清实现的思路，再慢慢琢磨。

主要是通过两个div层嵌套实现，外层的div设置固定宽度，且设置为超出显示区域会被hidden。然后使用jquery的animate方法实现滚动，。滚动需要一个变量计数来判断是否处于临界的边缘，这个其实比较简单了。根据显示区域的图片数量和总的图片数量就可以确定计数的临界值。

核心代码：

$(function(){

var len =$('.showbox ul').children().length;//列表图片个数
var imgWid=$('.showbox ul li').outerWidth();//图片总区域宽度包含border、padding
var imgNum=5; //显示区域图片个数
var curdInex=0; //初始图片移动索引
var boxWid=$('.box').width(); //外层box div宽度
var $showbox=$('.showbox');
var $pre =$('span.pre');
var $next=$('span.next');

//向左按钮事件
$pre.click(function(){
if(curIndex==(len-imgNum)){
alert("已经是最后一张");
curIndex=len-imgNum;
}else{
$showbox.animate({'left':'-='+imgWid},200);
curIndex+=1;
}

});

//向右按钮事件
$next.click(function(){
if(curIndex==0){
alert("这是第一张图片");
curIndex=0;
}else{
$showbox.animate({'left':'+='+imgWid},200);
curIndex-=1;
}
});

});

HTML代码：

<div class="box">
<div class="showbox">
<ul>
<li><img src="images/1.jpg" alt="demo" title="1.jpg"></li>
<li><img src="images/2.jpg" alt="demo" title="2.jpg"></li>
<li><img src="images/3.jpg" alt="demo" title="3.jpg"></li>
<li><img src="images/1.jpg" alt="demo" title="1.jpg"></li>
<li><img src="images/2.jpg" alt="demo" title="2.jpg"></li>
<li><img src="images/3.jpg" alt="demo" title="3.jpg"></li>
<li><img src="images/1.jpg" alt="demo" title="1.jpg"></li>
<li><img src="images/2.jpg" alt="demo" title="2.jpg"></li>
<li><img src="images/3.jpg" alt="demo" title="3.jpg"></li>
<li><img src="images/1.jpg" alt="demo" title="1.jpg"></li>
<li><img src="images/2.jpg" alt="demo" title="2.jpg"></li>
<li><img src="images/3.jpg" alt="demo" title="3.jpg"></li>
<li><img src="images/1.jpg" alt="demo" title="1.jpg"></li>
<li><img src="images/2.jpg" alt="demo" title="2.jpg"></li>
<li><img src="images/3.jpg" alt="demo" title="3.jpg"></li>
</ul>
</div>
<span class="pre">向左</span>
<span class="next">向右</span>
</div>

CSS:

*{ margin: 0;padding: 0;}
.box{ width: 761px; height: 210px; background: #ddd; margin: 1em auto; border:1em solid #eee; position: relative; overflow: hidden;}
.showbox{position: absolute;left: 0;top:27px;width: 20000px;height:160px;background: #f2e2cc;}
.showbox ul{ list-style-type: none;}
.showbox ul li{ float: left; border: 1px solid #eee;}
.showbox ul li img{ width: 150px; height: 150px;}
.box span{ position: absolute; cursor: pointer; background: #aaa;}
.box span.pre{ left: 10px; bottom: 0;}
.box span.next{right: 10px;bottom: 0;}

显示效果：



源代码：

http://download.csdn.net/detail/monarch_lin/7096775