<!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. 矩阵分解----Cholesky分解

    矩阵分解是将矩阵拆解成多个矩阵的乘积,常见的分解方法有 三角分解法.QR分解法.奇异值分解法.三角分解法是将原方阵分解成一个上三角矩阵和一个下三角矩阵,这种分解方法叫做LU分解法.进一步,如果待分解的 ...

  2. 更改jenkins的默认工作空间并迁移插件和配置数据

    最近刚使用阿里云ECS centos服务器,购买的是40G的系统盘,60G的数据盘. 昨天在查看服务器磁盘空间的时候,偶然发现 /dev/vda1 下面40G的空间已使用17G, 因为服务器才开始使用 ...

  3. torchvision 批量可视化图片

    1.1 简介 计算机视觉中,我们需要观察我们的神经网络输出是否合理.因此就需要进行可视化的操作. orchvision是独立于pytorch的关于图像操作的一些方便工具库. torchvision的详 ...

  4. Android 公共库的建立方法

    本文主要介绍在android工程中如何将共用代码建成公共包方便其他工程引用.引用后的工程结构分析.library引入方式的优缺点. 自己也写了一些android公共的库,有兴趣的可以参考 Trinea ...

  5. CodeMirror 小册子

    User manual and reference guide      version 5.41.1 用户手册和参考指南 CodeMirror is a code-editor component ...

  6. Daily Scrum - 12/03

    Meeting Minutes   后端基本完成,结束当前Sprint, 开始下一个Sprint.进一步讨论了UI,并完成了任务分配.   Burndown     Progress   part 组 ...

  7. Laravel 从入门到精通系列教程

    转载;https://laravelacademy.org/laravel-tutorial-5_7 适用于 Laravel 5.5.5.6.5.7 版本,本系列教程将围绕一个 LTS 版本,然后采取 ...

  8. orcle 远程连接其他数据库 进行查询数据

    CREATE PUBLIC DATABASE LINK testlinkCONNECT TO hxka IDENTIFIED BY bjdscoalUSING '(DESCRIPTION =(ADDR ...

  9. windows文件共享 防火墙规则设置

    防火墙入站规则.完成以下两项设置即可. 设置一 操作:允许连接协议类型:UDP本地端口:137, 138远程端口:所有端口 设置二 操作:允许连接协议类型:TCP本地端口:139, 445远程端口:所 ...

  10. 通过my.ini修改mysql默认编码为gbk

    如何一次性修改后台显示语言为gbk 1. 找到my.ini(这是一个Mysql的配置文件) 1.1 要先打开显示隐藏文件的设置:https://jingyan.baidu.com/article/da ...