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. jisuanqi

    1.jisuanqi 2.https://github.com/12wangmin/text/tree/master 3.计算截图 7+8 清除 4.总结 通过课程设计,主要要达到两个目的,一是检验和 ...

  2. 6-Python3从入门到实战—基础之数据类型(元组-Tuple)

    Python从入门到实战系列--目录 元组的定义 定义元组只需要在括号中添加元素,并使用逗号隔开即可 tup = ('Python','Java','C++','Kotlin') 元组与列表的区别 P ...

  3. Tomcat启动失败

    前景:使用的是tomcat9.0,配置好后,使用一切正常,刷慕课跟着做练习,也一切正常.出事在于,老师为了方便直接拷之前写的一个项目,我照做了,老师改了虚拟路径了,我忘记改了,然后跑了一下项目就出毛病 ...

  4. Linux 改变文件属性与权限

    常用的修改文件组或文件的命令有三个:chgrp.chown.chmod. 1 chgrp 改变文件所属的用户组 改变一个文件的用户组直接以chgrp来改变即可,这个命令时change group 的简 ...

  5. error launching installer-最新版Win 10 解决方案

    error 提示 error launching installer遇到 error的背景 楼主最近重新装了Windows 10 pro 64 bit 版,安装的时候选的地区是United State ...

  6. codeforces437C

    The Child and Toy CodeForces - 437C On Children's Day, the child got a toy from Delayyy as a present ...

  7. Enea推出Linux实时加速方案专门针对Xilinx UltraScale+

    导读 Enea(纳斯达克OMX Nordic:ENEA)Linux实时加速方案的扩展版本,完全集成了Xilinx UltraScale +系列的所有处理单元.借助Xilinx开发者大会(XDF)201 ...

  8. 当你觉得大学没学到Linux时的感想

    你的大学生活是什么样的呢?你在大学有学到特殊的技能吗?你可以在大学毕业的时候找到一份满意的工作吗?当这些问题摆在你面前的时候,你会迷茫吗,绝大多数的人在毕业的时候并不能找到一份好的工作,那不是因为你的 ...

  9. python中 Lambda,Map,Filter,Itertools,Generator高级函数的用法

    Lambda 函数 Lambda 函数是一种比较小的匿名函数--匿名是指它实际上没有函数名. Python 函数通常使用 def a_function_name() 样式来定义,但对于 lambda ...

  10. HTML-XML数据解析

    HTML代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...