jQuery无缝滚动插件

文章目录

jQuery无缝滚动插件

目前支持间断和连续的两种方式,支持向左和向上滚动两个方向,支持自定义滚动的速度和间隔时间,支持自定义滚动外层内容和子元素内容,支持一次滚动的图片数量。

使用方法

引入jquery地址并引入本插件地址,添加以下代码:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="scrollForever.js"></script>
<script type="text/javascript">
$(function(){
$("#a1").scrollForever();
})
</script>

HTML代码为:

<div class="a" id="a1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>

CSS代码

.a{height: 200px; width:800px; overflow: hidden; margin:10px auto;}
.a li{height: 198px; width: 198px; border:1px solid #ddd; line-height: 2.4; font-size: 30px; text-align: center; float: left;}

插件参数

参数名字参数默认值参数描述
continuoustrue是否连续
placeholder0非连续滚动时每次的滑动距离,可以自定义,如果没有自定义则根据子元素和滚动数量来决定
dir'left'滚动方面,可以为left和top
container'ul'外层元素
innner'li'子元素
speed1000非连续滚动速度
delayTime0滚动间隔,非连续滚动为2000ms,连续滚动为20ms,可以自定义
num1非连续一次滚动的数量

演示和下载

本站将会提供插件和非插件的几种思路,同时区分出无缝连续滚动和无缝间断的代码。

无缝滚动插件版无缝向左1无缝向左2无缝向上间断向左间断向上

下载插件

本插件已经传到github上,欢迎到github的主页上Fork,如果觉得好用,请点击Star支持我的工作,感谢。

scrollForever 主页

原文链接:jQuery无缝滚动插件 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/scrollforever)

发表评论

请登录后发表评论:

62 Responses to “jQuery无缝滚动插件”

  1. ewfwgwgwgwfwfweuifhwi

    不错的东西,想学习看看

    登录回复
  2. 采蘑菇的北冥雪2012

    像博主学习!

    登录回复
  3. 小白前端

    看看

    登录回复
  4. 小清新咔咔酷

    想看看效果

    登录回复
  5. 小小的小小Lin

    不错的东西,想学习看看

    登录回复
  6. lvhuizhenxx

    很不错的东西呢

    登录回复
  7. 家有娇妻王二阳

    学习学习

    登录回复
  8. 风吹脚丫浩痒痒

    不错啊

    登录回复
  9. 进击的前端攻城狮

    学习下看看

    登录回复
  10. __Yp__

    look

    登录回复
  11. 孫季川

    看下效果怎样

    登录回复
  12. free_anongao

    来看看效果如何

    登录回复