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)

发表评论

请登录后发表评论:

“jQuery无缝滚动插件”有62个评论

  1. ewfwgwgwgwfwfweuifhwi

    不错的东西,想学习看看

    ¥ 打赏 赞(0)
    登录回复
  2. 采蘑菇的北冥雪2012

    像博主学习!

    ¥ 打赏 赞(0)
    登录回复
  3. 小白前端

    看看

    ¥ 打赏 赞(0)
    登录回复
  4. 小清新咔咔酷

    想看看效果

    ¥ 打赏 赞(0)
    登录回复
  5. 小小的小小Lin

    不错的东西,想学习看看

    ¥ 打赏 赞(0)
    登录回复
  6. lvhuizhenxx

    很不错的东西呢

    ¥ 打赏 赞(0)
    登录回复
  7. 家有娇妻王二阳

    学习学习

    ¥ 打赏 赞(0)
    登录回复
  8. 风吹脚丫浩痒痒

    不错啊

    ¥ 打赏 赞(0)
    登录回复
  9. 进击的前端攻城狮

    学习下看看

    ¥ 打赏 赞(0)
    登录回复
  10. __Yp__

    look

    ¥ 打赏 赞(1)
    登录回复
  11. 孫季川

    看下效果怎样

    ¥ 打赏 赞(1)
    登录回复
  12. free_anongao

    来看看效果如何

    ¥ 打赏 赞(1)
    登录回复