<!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. 前端菜鸟起飞之学会ps切图

    由于之前只顾着追求效率,没有学习过PS,但其实这是前端开发人员需要学会的技能之一,曾经看过一个大佬的前端经验分享说他在招聘时遇到不会切图的会直接pass掉,可见前端开发人员学会切图是多么重要.通过观看 ...

  2. 批量备份H3C交换机路由器配置

    第一种(使用ftp下载配置文件): #!/bin/bash datetime=`date +%Y%m%d` BAKTIME=`date +%Y%m%d%H%M%S` user="admin& ...

  3. thinkphp3.2 批量添加数据

    这是我遇到的thinkphp3.2 当中最让我无语的坑 批量添加数据有个方法是 addAll() 这个方法一定要注意数组的键名,一定要整齐!!! 可以在存入数据前,用ksort()方法将数组的键名排序 ...

  4. SDN可靠性相关

    A subtree-based approach to failure detection and protection for multicast in SDN FRONTIERS OF INFOR ...

  5. Spark 实践——音乐推荐和 Audioscrobbler 数据集

    本文基于<Spark 高级数据分析>第3章 用音乐推荐和Audioscrobbler数据 完整代码见 https://github.com/libaoquan95/aasPractice/ ...

  6. 团队项目作业四 - WBS

    WBS 即 Work Breakdown Structure 工作分解结构, 经过我们小组的讨论,对于手机计算器APP的工作分解结构,定为以下几个方面: 1.APP框架搭建,按钮的设计,对按钮的响应等 ...

  7. word漏洞分析与利用

    众所周知,溢出漏洞从应用形式上可分为远程服务溢出漏洞和客户端(本地)溢出漏洞两类.远程服务溢出漏洞大家很熟悉了,红色代码.冲击波.振荡波等蠕虫都利用了此类漏洞,漏洞的调试和利用有相应的一套方法,前面的 ...

  8. Spring IOC AOP的原理 如果让你自己设计IOC，AOP如何处理(百度)

    百度的面试官问,如果让你自己设计一个IOC,和AOP,如何设计, 我把IOC的过程答出来了,但是明显不对, (1) IOC 利用了反射,自己有个id,classtype,hashmap,所有的功能都在 ...

  9. MyBatis关联查询，一对多关联查询

    实体关系图,一个国家对应多个城市 一对多关联查询可用三种方式实现: 单步查询,利用collection标签为级联属性赋值: 分步查询: 利用association标签进行分步查询: 利用collect ...

  10. 设置close