使用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