jquery滚动实现原理之一，自制滚动函数实例

最新推荐文章于 2021-11-25 00:07:27 发布

ft2166826

最新推荐文章于 2021-11-25 00:07:27 发布

阅读量1.1k

点赞数

分类专栏： html/div/css

html/div/css 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

jquery滚动实现原理之一，自制滚动函数实例

(2012-03-20 16:23:09)

转载▼

js标签横向滚动的实现的原理有很多种，进行我们来认识一下这个实现的方法：

我们常看到页面上有个框，显示3个图片，会自动滚动，两边有两个前后按钮来控制滚动，js是怎么实现的呢。我们一起来探讨一下：

我们做的效果是循环滚动，滚动到结尾是还可以向后滚动，内容却是从头开始，好像滚动不完一样，

实现原理：

这里有6个图，我们框中一个显示3个，点向后则滑动显示下3个比如：

图图图图图图

首先我们将这6个图复制一下并追加到这6个图的后面，形成这样：

图图图图图图图图图图图图

这样第1个和第7个第2个和第8个图是一样的依次类推

然后我们点击向后的按钮，用js来控制元素的left属性来时元素的移动，

当点击向后滚动后，我们通过left值，判断是否显示的是789图片，如果是我们让他的滚动lelf瞬间变成0，因为第前3个和789的图是一样的，所以你看出来他，这是图又回到了当初的样子，这是后面又是有6个图片，所以向后滚动好像滚动不完一样。

向前滚动道理一样，当现在文件是第一个的时候你点击了向前滚动则先判断如果是123图，这先设置left使其显示789图，这样前面就有了内容，可以滚动显示出来了。

也有滑动到456于向前滚动到123，这样的更简单，通过left值判断显示的456时，直接动画显示到123，这回先前滚动到123。这种效果是不用复制本身追加到本事后面的。

将下面代码复制到html文件中可以查看具体代码演示：（还有不足地方，同学们吸精华，吐糟粕即可）

使用注意：html代码中的prev 和next的代码必须是class属性且与上列中class为con的同兄弟关系<br>

使用方法：

1如果网页中有多个图片滚动区，不行执行多个函数的话吧函数的conclss,outclass,inclass这三个函数设置成一样，就是在网页中html代码中图片观点区的3个class都是一样的，这样的缺点是鼠标移动上去所有的滚动区域一起停掉，当然这样方法中后面的设置也是一样的，比如美国图片滚动框内图的个数和一共几屏幕也都一样，此方法限制多多

多个图片滚动去相互不影响，缺点是要多次调用函数，此方法需要每个图片滚动区域的3个class不一样。4 56的参数视每个滚动框的情况而定，第6 个参数是一共函数名，不能以数字开头，且每个滚动的第6个参数都不一样，

++++++++++++++++++++++++++++++++++++》》》》》》》》》》》》》》》

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>dddddddd</title>

.content{width:500px;height:100px; border:1px solidred;}

.next,.prev{margin:5px; height:90px;width:10px;float:left;border:1px solid #5d8;}

.con {width:440px; height:90px; background:#dee;float:left;padding:0; margin:5px; overflow:hidden; position:relative}

.con ul {list-style:none; height:90px;padding:0 ;margin:0;position:absolute;left:0px;}

.con li{height: 70px; margin:10px; width:125px; border:1pxsolid #333;float:left; text-align:center;line-height:70px;}

</style>

<scriptsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'type='text/javascript'></script>

<scripttype='text/javascript'>

var jq = jQuery.noConflict();

functionleft_right_scroll(conclss,outclass,inclass,num,tnum,speed,intername){//左右图片滚动效果

if(!arguments[6]) intername = "MyMar"; //循环计算器的名称，确保各个模块之间不相互干扰，这个参数是缺省参数

var kWidth = jq(inclass+' li').outerWidth(true);//一个框的宽度

var width = num*tnum*kWidth; //获取li列表总宽度

jq(inclass).css('width',width*2+'px').append(jq(inclass).html()); //复制原来的一段添加到这里形成第二段，这里是滚动实现的关键所在

jq('.next').click(function(){

zWinScorll(outclass,inclass,jq(this),tnum,width,kWidth,num,speed);//点击向后按钮执行向后滚动函数

});

jq('.prev').click(function(){

fWinScorll(outclass,inclass,jq(this),tnum,width,kWidth,num,speed);//点击向前按钮执行向滚动函数

});

intername=setInterval(function(){jq(conclss+'.next').trigger('click');},5000);//定义自动滚动函数，循环执行模拟当前当前下点击，其实循环执行正向滚动函数也行。.next 前加上了conclass变量是定义传入不同范围内点击，实现相互不干扰

jq(conclss).mouseover(function(){

clearInterval(intername);

}).mouseout(function(){

intername=setInterval(function(){jq(conclss+'.next').trigger('click');},5000);

});

}

functionzWinScorll(outclass,inclass,mes,tnum,width,kWidth,num,speed){ //定义正向滚动函数

var me = mes.siblings(outclass).find(inclass);

//"异步处理"，就是点next页面上的框不是都滚动，而是通过逻辑关系来处理是哪个滚动

if(!me.is(':animated')){ //判断当前元素是否处于动画状态，不处于才追加动画

me.stop().animate({'left':'-='+kWidth*num+'px'},speed,function(){//将元素的left -= 3个元素的宽度以显示下三元素/可以通过改变num的值来显示滚动的个数

if(me.css('left') == -width+'px'){me.css('left','0px');}//判断滚动的是原来的宽度时将left设为0，实现循环滚动