<!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. H5游戏接微信小游戏的支付，满满的都是坑！

    h5小游戏接微信的支付,简直是在为难我胖虎,说多了都是泪. 准备工作: 准备工作一定要做好,不然很容易出错.首先是session_key这个字段,这个session_key是登录的时候需要用到的,根据 ...

  2. 当activity改变时，我们如何处理它

    用户和系统触发­的事件,可能造成一个activity状体的改变.这个文档描述了一些常见的情况,和如何去处理这些改变. 原网站:https://developer.android.google.cn/g ...

  3. 新手向：从不同的角度来详细分析Redis

    最近对华为云分布式缓存产品Redis做了一些研究,于是整理了一些基本的知识拿出来与大家分享,首先跟大家分享的是,如何从不同的角度来详细使用Redis. 小编将从以下9个角度来进行详细分析,希望可以帮到 ...

  4. abcdocker 的博客

    技术参考总结 abcdocker 的博客 09月 3 篇 20日 Centos7 图形化创建KVM 10日 Nginx 代理Google 进行*** 10日 mac 安装装逼神器cmatrix 08月 ...

  5. 四种遍历hashMap的方法及比较

    学习怎样遍历Java hashMap及不同方法的性能. // hashMap的遍历 public void testHashMap() { Map<String, String> map ...

  6. PAT甲题题解-1007. Maximum Subsequence Sum (25)-求最大子区间和

    题意:给出n个数,求最大连续的子区间和,并且输出该区间的第一个和最后一个数. 如果所有数都小于0,那么则输出0,第一个数和最后一个数. 看数据k的范围,就知道肯定不能两层for循环来求区间和,O(n^ ...

  7. java实验报告一

    一.实验内容 1. 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试Java程序 二.实验步骤 (一)命令行下Java程序开发 1. 首先双击桌面上的Xface终 ...

  8. Objective-C runtime 机制

    Runtime使用C语言结构体表示对象,用C语言函数表示方法,这些C语言函数和结构体被Runtime封装后,我们就可以在程序中执行创建,检查,修改类和对象和他们的方法 OC的Class其实是一个obj ...

  9. Java认识对象

    一.类与对象 java中有基本类型和类类型两个类型系统.Java撰写程序几乎都在使用对象,要产生对象必须先定义类,类是对象的设计图,对象是类的实例 1.定义类 类定义使用的关键词为class,建立实例 ...

  10. 【Leetcode】535. Encode and Decode TinyURL

    Question: TinyURL is a URL shortening service where you enter a URL such as https://leetcode.com/pro ...