使用jQuery实现图片滑动窗

来源：互联网发布：htc m9 v版网络设置编辑：程序博客网时间：2024/06/04 19:50

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

0 0