[原创]绝对详解:jQuery实现可控方向的图片滚动详解(二),绝对原创转载注明出处
本案例源码 jquery-img-scroll.zip
接上文,我们已经做过分析,如下: 1)图片要在某一个区域滚动,要有个范围,这个很简单就是用一些网页容器就行 2)根据我们得要求图片要进行滚动,如何能实现图片的精确滚动呢? 3)图片可以定时的滚动,如何能实现定时滚动呢? 下面我们做个简单分析: 1)图片要实现在某一个区域滚动,我们可以直接使用一个div来实现 如图: 2)如何实现图片的移动则是一个核心的问题,要想实现图片的滚动,可以有多种方法, 比如:让图片一张、一张的移动,通过改变图片的相对坐标来实现 另外一种方法是,把图片放到一个ul中,每个li是一个图片,这样通过动态的改变ul的坐标来实现。 如图: 3)关于图片的定时移动这个也很简单,我们可以通过js中的定时器就可以实现。 经过上述分析:我们来看源码如何实现: |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <style>
- .scroll{
- position:relative;
- background-color:#CCCCCC;
- border:#666666 2px solid;
- width:400px;
- height:120px;
- overflow:hidden;
- }
- .items{
- position:absolute;
- margin:0px;
- padding:0px;
- list-style-type:none;
- width:9999em;
- }
- .items li{
- float:left;}
- </style>
- <script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>jQuery实现图片的滚动效果</title>
- </head>
- <body>
- <div class="scroll">
- <ul class="items">
- <li><img src="../images/xyy1.gif" width="100" height="120" /></li>
- <li><img src="../images/htl.jpg" width="100" height="120" /></li>
- <li><img src="../images/xyy1.gif" width="100" height="120" /></li>
- <li><img src="../images/xyy2.gif" width="100" height="120" /></li>
- <li><img src="../images/htl2.gif" width="100" height="120" /></li>
- <li><img src="../images/xyy1.gif" width="100" height="120" /></li>
- <li><img src="../images/htl.jpg" width="100" height="120" /></li>
- <li><img src="../images/xyy1.gif" width="100" height="120" /></li>
- <li><img src="../images/xyy2.gif" width="100" height="120" /></li>
- <li><img src="../images/htl2.gif" width="100" height="120" /></li>
- </ul>
- </div>
- <button id="prev">向左</button>
- <button id="next">向右</button>
- </body>
- </html>
- <script language="javascript" type="text/javascript">
- $(document).ready(function(){
- //定义位移变量
- var i=1;
- var pageSize=3;
- var nowPage=1;
- var page=Math.ceil($(".items>li").length/pageSize);
- var dir=true;
- var delay=3000;
- //处理鼠标单击向后事件
- $("#next").click(function(){
- //执行向后移动
- goNext();
- });
- //处理鼠标单击上一页事件
- $("#prev").click(function(){
- //执行向前移动
- goPrev();
- });
- function goMove(location){
- //获得当前元素距父元素的相对位置
- var left=$(".items>li").eq(location).position().left;
- //带擦除效果的移动效果,left=-left表示没次把元素的位置移放置到起始位置
- $(".items").animate({left:-left},300,"swing");
- }
- //处理向下移动的函数
- function goNext(){
- //如果到了最后一页,则不可以点击按钮,并且改变自动滑动方向向前
- if(nowPage==page){dir=false;return;}
- //向后移动图片
- goMove(nowPage*pageSize);
- i++;
- nowPage++;
- }
- //处理向前移动效果
- function goPrev(){
- //如果到了第一页,则不可以点击按钮,并且改变自动滑动方向向后
- if(nowPage==1){dir=true;return};
- nowPage--;
- //向前移动图片
- goMove((nowPage-1)*pageSize);
- i--;
- }
- //自动开始左右移动
- function goPlay1(){
- if(dir){
- goNext();
- }else{
- goPrev();
- }
- }
- //定时移动
- setInterval(goPlay1,3000);
- });
- </script>
注意:1)要设置div和ul的样式,重点是之间的定位的问题
2)//获得当前元素距父元素的相对位置
var left=$(".items>li").eq(location).position().left;
通过position()获取ul相对于div的距离
3)eq(location)表示获取第location个元素,例子中是获取第 locattion 个图片
4)当点击“向前” “向后” 时怎么计算移动多少个位置,也即是怎样通过nowPage怎么计算locattion 的值
看下图:
经过上述分析,相信很多同学已经明白了吧?
源码下载: jquery-img-scroll.zip
[原创地址] [源码下载] [更多原创,多多支持多]