banner轮播无缝滚动万金油jq代码

HTML:

  <div class="box">

    <ul>

      <li>11111</li>

      <li>22222</li>

    </ul>

  </div>

JQ:

调用:$(function(){

    setinterval(functon(){

      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的宽度.    封装是为了重复调用的时候,减少代码量。

时间: 2024-10-08 08:16:51

banner轮播无缝滚动万金油jq代码的相关文章

手把手教你用ViewPager自定义实现Banner轮播

手把手教你用ViewPager自定义实现Banner轮播 欢迎大家关注Android开源网络框架NoHttp:https://github.com/Y0LANDA/NoHttp 我们在实际开发中,很多App都会在做一个广告轮播器(可能是图片,可能是其他View),很多同学都是使用别人封装好的或者直接使用ViewPager自己来改,但是有人可能并不理解里面的原理,或者有人遇到了手势滑动冲突.我们今天就用150行代码实现一自定义的广告轮播器并不干扰原来View滑动事件. 本例代码源码及Demo传送门

Android UI - 实现广告Banner轮播效果

Android UI - 实现广告Banner轮播效果 前言 本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比较常见,一些视频类应用就经常有,就拿360影视大全来举例吧: 用红框框住的那个效果就是小巫今天要分享的,先来思考一下会用到什么控件?有什么用户体验? 控件我们可能一下子就可以想到的自然是ViewPager,没错!用到的就是ViewPager,那么它会有什么用户体验呢,它可能有以下几个体验: 1. 间隔不停的切换图片,指示器也跟着变 2. 点击图片可以跳转到指定的页面

jquery banner 轮播配置方法

1 概述 Banner可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题.Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心.在以往很多项目中主要体现在首页.登录页中对客户的提供的图片进行展示,本文档主要介绍基本的使用方式和结合我们aeai_portal产品首页的展示配置改造方式. 2 样例介绍 样例结构如下图,images文件夹.js文件夹和indexhtml文件. image:样例中使用到的图片: js: jquery-1.10.2.min

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

接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞了好长时间.也好,那就国庆8天好好的写一下,这里写了一半,先放着.先介绍一下这一半的内容.       还是老规矩,先放个图吧,虽然才一点点了 上线的banner大图和京东头条都是可以滚动的,抄写微信小程序社区官方qq群:390289365里 Nige

JS 轮播图(无缝连接的轮播图实现,含代码供参考)

需求:实现轮播图,图片无缝切换,自动播放. 实现效果: 思考一下:在图片列表后面多加一张图片,这张图片是第一张图片(为了确保无缝衔接).图片就是平铺放在一个pic里面的,每次移动就是改变的pic的left值. 来撸代码~~.所有的代码放在最后面,这里只讲一些重要的方法: 为防止懵逼:先贴出封装函数move()的代码供参考 function move(ele, attr, speed, target, callback){ //获取当前的位置 //从左往右进行移动 --- current<targ

轮播图点击 手势 代码

#import "HotNewsTableViewController.h" #import "HotNewsTableViewCell.h" #import "HotNews.h" #import "JudegNetWorkType.h" #import "HotNewsDetailViewController.h" #import "MJRefresh.h" #import &quo

带同时滚动小色条的banner轮播图jq

<div class="baoliao tongcheng"> <p class="headline1">同城<font>活动>></font></p> <ul class="tongchengul"> <li> <div class="libox"> <div class="imgboxoo"

如何使用微信小程序制作banner轮播图?

在前端工程师的工作中,banner是必不可少的,那缺少了DOM的小程序是如何实现banner图的呢?如同其他的框架封装了不同的banner图的方法,小程序也封装了banner的方法,来让我一一道来: 一:准备工作 我用两张图吧,如下所示: 1.jpg                                                                                       2.jpg 二:编写xsml代码(即html) 在这里我们要是用<swipe

[Jquery]某宝图片轮播(无缝)

[思路] 1.结构与样式 ①最外层div盒子当容器,里面ul宽度无限大并且相对定位(到时候移动其实移的是ul的left) ②按钮的透明度可用background:rgba()来搞定 ③最后一张图片后面紧接第一张,第一张前面紧接最后一张,也就是5123451(不这样做两张图片没有办法贴在一起),这是无缝的关键 2.js ①每次点击按钮,移动的ul距离就是,当前图片的索引*图片宽度 ②当移到第“6”张图片时(即5后面的1),应该立刻把他拉回1的位置,但要注意这个判断瞬间拉回的语句,应该写在anima