HTML:

 <div class="box">
    <ul>
      <li>11111</li>
      <li>22222</li>
    </ul>
</div>

JQ:

 $(function(){
  setInterval(function(){
      scroll($(".box ul"));  
    },1000);
  })
  function scroll(obj){
    var h=obj.find(" li ").height(); //获取每个li的高度
    obj.animate({"margin-top":-h},function(){ //整个ul向上滚动一个li的高度,h的正负决定滚动的方向
    obj.find("li").eq(0).appendTo(obj);    //把ul的第一个li放到最后
    obj.css("margin-top",0);        //ul位置还原,看起来就像是在无缝滚动一样   }) }

说明:如果是上下无缝滚动,就用margin-top;如果是左右滚动就用margin-left,然后是获取每个li的宽度.

banner轮播无缝滚动 jq代码的更多相关文章

  1. JQuery实现图片轮播无缝滚动

    图片轮播无缝滚动实例 实现效果展示预览: 思路: 1.设置当前索引curIndex,和前一张索引prevIndex.(curIndex为下一次要显示的图片索引,prevIndex为现在看见的图片) 2 ...

  2. 原生无缝Banner轮播图

    话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...

  3. SuperSlide轮播插件滚动高度或宽度不对的问题解决

    声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...

  4. 基于Jquery的banner轮播插件,简单粗暴

    新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的3D旋转,技术不够,所以封装了一个简单的banner轮播插件,功能也比较简单,就是左右向的轮播. 先挂地址https://github ...

  5. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  6. jquery banner 轮播配置方法

    1 概述 Banner可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题.Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心.在以往很多项目中主要体 ...

  7. 用JavaScript制作banner轮播图

    JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...

  8. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JavaScript banner轮播 左右切换 圆点点击切换

    1.效果如下图: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. 复审Partner

    复审代码后,发现了一些问题: 首先说优点:代码十分工整,很清晰,各种类易于理解,逻辑上很通顺. 基本实现了代码功能,输出正确. 发现的缺点:对于文件后缀的识别有点问题,不能识别所需求的所有文件,只有一 ...

  2. Rop框架学习笔记

    1.  提供了开发服务平台的解决方案:比如应用认证.会话管理.安全控制.错误模型.版本管理.超时限制 2.  启动:RopServlet截获http请求 配置: <servlet> < ...

  3. 用户模拟+spec

    用户模拟:用户模拟的对象分别为小学二年级学生,学生父亲以及小学教师. 名字 孔小颖 性别 男 职业 小学生 收入 来自父母给予 知识层次和能力 小学二年级 生活/工作情况 在学校上课,数学成绩较差,放 ...

  4. 如何使squild服务只能使用自定义的端口号

    编辑配置文件: vim /etc/squid/squid.conf http_port  10000 使用 setsebool 命令来限制 squild 服务只能使用自定义的端口: setsebool ...

  5. Redis的五种数据类型

    官方的几篇很好的文章: https://redis.io/topics/data-types https://redis.io/topics/data-types-intro https://redi ...

  6. curl用法一例 传递代理用户名密码

    curl -u bb0e1736d66744495b814b942fd04a80:0e11dda88048ed52cc8758caf06dc6b4 https://jinshuju.net/api/v ...

  7. No input file specified ci

    1. php.ini(/etc/php5/cgi/php.ini)的配置中这两项cgi.fix_pathinfo=1  (这个是自己添加的)

  8. delphi简单单向字符串加密函数

    delphi用久了有的时候得给密码加密一下,简单点就行了,这个函数还是不错的. const XorKey:array[0..7] of Byte=($B2,$09,$AA,$55,$93,$6D,$8 ...

  9. Java之枚举举例

    package enumdemo; /** * 枚举类 */ public enum MAPPER { // 实例 ELEMENT_NAME("mapper"), ATTRIBUT ...

  10. python 抽象类与接口类

    几个类 实现的方法都一致的话 就继承同一个父类 在父类写一个公共方法 给子类使用