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. 11.18 Daily Scrum

    这两天开发人员陆续提交了自己开发的部分. 目前所有开发任务都已经完成,剩下的只是测试和整合,做最后的冲刺. 明天的任务: 李承晗:测试与整合

  2. PHP开发:Eclipse版环境配置

    软件: 1.eclipse php版本下载地址:http://www.eclipse.org/downloads/packages/eclipse-php-developers/heliosr 2.A ...

  3. SE Springer小组之《Spring音乐播放器》需求分析说明书二

    2.1 目标 Spring音乐播放器软件为课程<软件工程>所开发的课程作业,主要意图是为访问计算机中的mp3格式的音频文件,并使其能够完成访问,读取,添加,保存,播放,切换音频文件等功能. ...

  4. Windows 7 64位安装cURL

    安装cURL. 1, 下载64位的SSL版cURL,网址: http://curl.download.nextag.com/download/curl-7.21.7-win64-ssl-sspi.zi ...

  5. js数组的用法

    1.数组 - - 添加元素 arr.push('abc')  向数组尾部添加元素,返回值为数组的长度 arr.unshift('abc')  向数组头部添加元素,返回值为数组的长度 2.数组 - - ...

  6. The import * cannot be resolved

    背景 使用eclipse jee做练习的时候,下载了老师的项目源码.考虑到老师用的时myeclipse,目录结构略有不同,所有不想直接导入项目,又考虑到,可能环境不一样,会出现这样那样的问题,所以我的 ...

  7. JavaScript获取DOM节点

    常用的方法有 document.getElementById("id"); document.getElementsByTagName('tagName'); document.g ...

  8. HDU 2032 杨辉三角

    http://acm.hdu.edu.cn/showproblem.php?pid=2032 Problem Description 还记得中学时候学过的杨辉三角吗?具体的定义这里不再描述,你可以参考 ...

  9. realm vs. domain

    从wiki的角度:https://wikidiff.com/domain/realm domain是物理的,realm是抽象的,都是领域. domain是一个人或组织拥有或控制的地理区域,而realm ...

  10. Javascript中实现继承的方式

    js中实现继承和传统的面向对象语言中有所不同:传统的面向对象语言的继承由类来实现,而在js中,是通过构造原型来实现的,原型与如下几个术语有关: ①构造函数:在构造函数内部拥有一个prototype属性 ...