<!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. Golang Context 详细介绍

    Golang context 本文包含对context实现上的分析和使用方式,分析部分源码讲解比价多,可能会比较枯燥,读者可以直接跳过去阅读使用部分. ps: 作者本着开源分享的精神撰写本篇文章,如果 ...

  2. PAT甲题题解-1064. Complete Binary Search Tree (30)-中序和层次遍历，水

    由于是满二叉树,用数组既可以表示父节点是i,则左孩子是2*i,右孩子是2*i+1另外根据二分搜索树的性质,中序遍历恰好是从小到大排序因此先中序遍历填充节点对应的值,然后再层次遍历输出即可. 又是一道遍 ...

  3. Linux内核分析第五章读书笔记

    第五章 系统调用 在操作系统中,内核提供了用户进程与内核进行交互的一组接口,这些接口在应用程序和内核之间扮演了使者的角色,保证系统稳定可靠,避免应用程序肆意妄行. 5.1 与内核通信 系统调用在用户空 ...

  4. 继承 多态 java相关基础知识

    1:静态语句块.构造语句块(就是只有大括号的那块)以及构造函数的执行顺序 例子: class HelloA { public HelloA() { System.out.println("H ...

  5. Docker HUB 的重要性

    1. 昨天晚上和今天早上 学习了下 mysql 的 主从配置(docker化部署) ,但是发现很多 -e 的参数不清楚. 然后在docker HUB 上面发现了具体的内容. 认识到 工作学习生活中 肯 ...

  6. 6 vue-cli mock数据

    https://www.cnblogs.com/dengxiaolei/p/7338773.html //--------------------------------------const por ...

  7. 微信小游戏 项目配置文件 project.config.json

    一.项目配置文件project.config.json 小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,在工具上做的任何配置都会写入到这个文件,当重新安装工具或 ...

  8. win 批处理

    前言 批处理文件(batch file)包含一系列 DOS命令,通常用于自动执行重复性任务.用户只需双击批处理文件便可执行任务,而无需重复输入相同指令.编写批处理文件非常简单,但难点在于确保一切按顺序 ...

  9. 安装配置ubuntu的web项目（新）

    1.下载jre wget -c javadl.oracle.com/webapps/download/AutoDL?BundleId=211989 -O jre-8u101-linux-i586.ta ...

  10. BZOJ2431 HAOI2009逆序对数列（动态规划）

    对于排列计数问题一般把数按一个特定的顺序加入排列.这个题做法比较显然,考虑将数从小到大加入排列即可. #include<iostream> #include<cstdio> # ...