banner轮播无缝滚动 jq代码

时间:2022-09-22 21:23:53

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. 原生无缝Banner轮播图

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

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

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

  3. 基于Jquery的banner轮播插件&comma;简单粗暴

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

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

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

  5. jquery banner 轮播配置方法

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

  6. 用JavaScript制作banner轮播图

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

  7. jQuery图片无缝滚动JS代码ul&sol;li结构

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

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

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

  9. 模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

随机推荐

  1. Java国际化(i18n)

    Java国际化(i18n) 最近在做一个网站国际化的功能.用Java做开发,使用spring+velocity. Java提供了对i18n的支持,spring对其做了集成,可以很方便的配置.主要思想就 ...

  2. 生成读取相关连接的物理地址的lib(动态导入库)和dll&lpar;动态链接库&rpar;

    一.导出相关dll库 将原先的CmdInfoToPipe.h class后加入关键字 __declspec(dllexport) #ifndef NETINFO_CMDINFOTOPIPE_H_ #d ...

  3. yii2源码学习笔记&lpar;十一)

    Controller控制器类,是所有控制器的基类,用于调用模型和布局. <?php /** * @link http://www.yiiframework.com/ * @copyright C ...

  4. C&plus;&plus;基础复习

    1.Object-C也是面向对象的语言:2.#include<iostream> //#include是一个预处理指令3.using namespace std; //std是命名空间,u ...

  5. ecside入门

    ECSide是有一个基于jsp tag的开源列表组件. 简单的说,它就是一组可以帮助你快速实现强大的列表的jsp标签. 它的工作原理很简单. 您将要展现的列表的数据集合(Collection),放入r ...

  6. python 开发之路 - 入门

    一. python 介绍 Python是著名的"龟叔"Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言.1991年 发布Python ...

  7. windowsServer部署站点

    ### windowsServer部署站点 前言:最近在和朋友一起买了个服务器,奈何他选的是windowsServer,无所谓了,就把自己的站点从之前的虚拟主机迁过来,记录下. 准备工作: 服务器上搭 ...

  8. 如何将Bitcoin比特币区块链数据导入关系数据库

    在接触了比特币和区块链后,我一直有一个想法,就是把所有比特币的区块链数据放入到关系数据库(比如SQL Server)中,然后当成一个数据仓库,做做比特币交易数据的各种分析.想法已经很久了,但是一直没有 ...

  9. 天使玩偶&colon;CDQ分治

    这道好(du)题(liu)还是很不错的 挺锻炼代码能力和不断优化 卡常的能力的. 对于 每次询问 我都可以将其分出方向 然后 写 也就是针对于4个方向 左下 左上 右下 右上 这样的话 就成功转换了问 ...

  10. postman 做接口测试

    Postman 之前是作为Chrome 的一个插件,现在要下载应用才能使用. 以下是postman 的界面: 各个功能区的使用如下: 快捷区: 快捷区提供常用的操作入口,包括运行收藏夹的一组测试数据, ...