<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>

</head>

<style>

    *{ margin: 0px; padding: 0px;}

    li{ list-style: none;}

    .content{ width: 1020px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; }

    .content ul{ width: 1020px; height:100px;}

    .content ul li{ float: left; width: 100px; height: 100px; border:#ccc solid 1px; display: block; margin: 5px;}

</style>

<body>

<div class="content">

<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>

    <li>13</li>

    <li>14</li>

    <li>15</li>

    <li>16</li>

    <li>17</li>

    <li>18</li>

    <li>19</li>

    <li>20</li>

    <li>21</li>

    <li>22</li>

    <li>23</li>

    <li>24</li>

</ul>

</div>

</body>

</html>

<script>

 function scroll(){

 $(".content ul").animate({"margin-left":"-110px"},function(){

     $(".content ul li:eq(0)").appendTo($(".content ul"))

     $(".content ul").css({"margin-left":0})

 })

 }

    setInterval(scroll,1000)

</script>

jquery(入门篇)无缝滚动

说明

    function scroll(){

     $(".content ul").animate({"margin-left":"-110px"},function(){

     //这个是让整个ul先向前滑动个li ,如果要一次性滑动5个~那么就是550px.

    //想向上滚动就改成 $(".content ul").animate({"margin-top":"-105px"}

    //想向下滚动就改成 $(".content ul").animate({"margin-top":"105px"}

    //想向右滚动就改成 $(".content ul").animate({"margin-left":"110px"}

         $(".content ul li:eq(0)").appendTo($(".content ul"))

         $(".content ul").css({"margin-left":0})

    //对应这的这边

    //想向上滚动就改成 $(".content ul").animate({"margin-top":0}

    //想向下滚动就改成 $(".content ul").animate({"margin-top":0}

    //想向右滚动就改成 $(".content ul").animate({"margin-left":0}

     })

     }

        setInterval(scroll,1000)

    //这上面的是1000是滚动的速度，可以自己调整

因为总是有新手们问我这些比较入门的东西所以我干脆写个博客了

DEMO

jquery(入门篇)无缝滚动的更多相关文章

  1. 基于jQuery的上下左右无缝滚动应用(单行或多行)

    $(function(){     var _wrap=$('ul.line');//定义滚动区域     var _interval=2000;//定义滚动间隙时间     var _moving; ...

  2. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  3. JQuery入门篇

    JQuery入门篇 jQuery选择器 “$”表示JQuery对象 根据ID查找 $(‘#var’)表示将一个id值为var的DOM节点封装成一个jQuery对象,DOM节点必须以“#”开头. 例如: ...

  4. 自己编写jQuery插件 之 无缝滚动

    一. 效果图 二. Html骨架结构 <div class="box"> <ul> <li>1</li> <li>2&l ...

  5. jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)

    最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...

  6. 基于jQuery的上下无缝滚动应用(单行或多行)

    工作中遇到的一个js代码,现在对.trigger('mouseleave'),仍一知半解... <script>$(function(){//单行应用var _wrap=$('ul.lin ...

  7. 基于JQuery打造无缝滚动新闻

    JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...

  8. JQuery的无缝滚动

    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

随机推荐

  1. [转帖] wordpress 的安装过程

    https://blog.csdn.net/qq_34364668/article/details/78116473 下载Wordpress wget http://wordpress.org/lat ...

  2. Oracle 最新版本变化 转帖

    版本更迭 http://www.sohu.com/a/163264045_505827 Oracle Database的下一个版本将是 Oracle 18. 目的 为了更快的.通过每年的版本发布将新特 ...

  3. 基于 ARM的 Windows 10S 笔记本 转帖

    首款骁龙笔记本华硕畅370评测:续航不俗 性能拖后腿 2018年06月21日 12:23 新浪数码 缩小字体放大字体收藏微博微信分享   相关阅读:国内首款骁龙本华硕畅370发布:6199元送一年无限 ...

  4. SQLSERVER 查看操作系统内存

    1. 通过系统试图查看内存信息 SELECT total_physical_memory_kb / AS [物理内存(MB)] , available_physical_memory_kb / AS ...

  5. 【转】mysql优化步骤

    作者:zhuqz链接:https://www.zhihu.com/question/19719997/answer/81930332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  6. PSP（3.23——3.29）以及周记录

    3.23 9:30 10:30 15 45 Android Studio 界面设计学习 A Y min 13:00 13:15 0 15 站立会议 A Y min 23:20 23:45 0 25 英 ...

  7. 【Vue学习笔记1】全局配置 Vue.config

    1.slient 类型:boolean: 默认:false: 用法:Vue.config.silent = true  用于取消 Vue 所有的日志与警告

  8. 【跨域】jsonp跨域实现方法

    封装原生jsonp: 以跨域调取豆瓣电影最热榜单为例: function $jsonp(url,data,callback){ var funcName = 'jsonp_cb' + Math.ran ...

  9. 安装 oracle

    先下载3个东西:链接忘记了,大家自己找一下 1  ORA+11+G+R2+server+64bit+for+windows.iso  (oracle 安装文件) 2  PLSql 3  oracle6 ...

  10. 使用System.getProperty方法，如何配置JVM系统属性

    原创文章,欢迎转载,转载请注明出处! 很多时候我们需要在项目中读取外部属性文件,用到了System.getProperty("")方法.这个方法需要配置JVM系统属性,那么如何配置 ...