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. JS 实现计算一段文字中的字节数,字母数,数字数,行数,汉字数。

    看到了匹配,第一个想到了用正则表达式,哈哈,果然很方便.不过正则表达式高深莫测!我还没有研究明白啊..目前学了点皮毛.代码如下: <!DOCTYPE html PUBLIC "-//W ...

  2. 趟坑:使用pip安装TensorFlow

    这几天在安装TensorFlow,看了很多教程,方法也试了几种. 最后还是用pip安装成功的,过程如下. 1.安装ubuntu后在  系统设置-软件与更新-附加驱动 里,更新N卡驱动. (N卡官网下载 ...

  3. 20150401 作业2 结对 四则运算(Doing)

    import java.util.ArrayList; import java.util.Random; import java.util.Scanner; public class SE2_1 {/ ...

  4. 编写一个shell脚本来编译并运行java代码

    概述 编译和运行java分别要用到javac命令和java命令,虽然可以使用IDE(比如eclipse,InteliJ,NetBean...),按一下快捷键就可以实现编译并运行,但是,在之前还要配置一 ...

  5. PHP文件下载功能实现

    客户端的浏览器通过HTTP协议可以实现文件下载: 方法一: 能提供用户下载的最简单的方法就是使用一个<a></a>标签,比如在页面中添加这么一行代码 <a href=&q ...

  6. Server Tomcat v7.0 Server at libra failed to start

    https://stackoverflow.com/questions/13244233/server-tomcat-v7-0-server-at-localhost-failed-to-start- ...

  7. the confilict between validation and readonly in jquery

    How can I disable jquery validation on readonly fields? http://stackoverflow.com/questions/10803294/ ...

  8. 安装rlwrap 的简单方法

    1. 下载安装 epel包 rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm 2. 安装r ...

  9. [日常工作]非Windows Server 系统远程经常断以及提高性能的方法

    1. 公司内有不少windows xp windows 7 这样的操作系统的机器在机房里面用来跑自动化脚本或者是其他用处. 经常有人反馈机器过一段时间连不上, 其实这一点是一个非常小的地方 很多机器上 ...

  10. string、const char*、 char* 、char[]相互转换

    转化总结如下: 目标格式 源格式 string const char* char* char[] string NULL const char*=string.c_str(); const char* ...