banner轮播无缝滚动 jq代码
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代码的更多相关文章
- JQuery实现图片轮播无缝滚动
图片轮播无缝滚动实例 实现效果展示预览: 思路: 1.设置当前索引curIndex,和前一张索引prevIndex.(curIndex为下一次要显示的图片索引,prevIndex为现在看见的图片) 2 ...
- 原生无缝Banner轮播图
话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...
- SuperSlide轮播插件滚动高度或宽度不对的问题解决
声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...
- 基于Jquery的banner轮播插件,简单粗暴
新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的3D旋转,技术不够,所以封装了一个简单的banner轮播插件,功能也比较简单,就是左右向的轮播. 先挂地址https://github ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- jquery banner 轮播配置方法
1 概述 Banner可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题.Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心.在以往很多项目中主要体 ...
- 用JavaScript制作banner轮播图
JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript banner轮播 左右切换 圆点点击切换
1.效果如下图: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
随机推荐
- D. Fun with Integers
链接 [http://codeforces.com/contest/1062/problem/D] 题意 给你n,让你从2到n这个区间找任意两个数,使得一个数是另一个的因子,绝对值小的可以变为绝对值大 ...
- 701 D. As Fast As Possible
###链接 [http://codeforces.com/group/1EzrFFyOc0/contest/701/problem/D] ###题意 n个人,走lm,有车但没人只能坐一次,车容量为k, ...
- The Golden Age CodeForces - 813B (数学+枚举)
Unlucky year in Berland is such a year that its number n can be represented as n = xa + yb, where a ...
- 组件vue传值
<div id="app"> <hs :message="name"></hs> 用来接收值 </div> &l ...
- Java并发—synchronized关键字
synchronized关键字的作用是线程同步,而线程的同步是为了防止多个线程访问一个数据对象时,对数据造成的破坏. synchronized用法 1. 在需要同步的方法的方法签名中加入synchro ...
- 求两个整数的最大公约数GCM
思路分析: (1)求差判定法: 如果两个数相差不大,可以用大数减去小数,所得的差与小数的最大公约数就是原来两个数的最大公约数.例如:求78和60的最大公约数.78-60=18,18和60的最大公约数 ...
- python3_字符串
一.字符串的表示 >>> s = "narjaja never give up" #字符串的创建和初始化 >>> s = 'narjaja ne ...
- datatime
/把一个日期字符串如“2007-2-28 10:18:30”转换为Date对象 var strArray=str.split(" "); var strDate=str ...
- python中Switch/Case实现
学习Python过程中,发现没有switch-case,过去写C习惯用Switch/Case语句,官方文档说通过if-elif实现.所以不妨自己来实现Switch/Case功能. 方法一 通过字典实现 ...
- python 协程库gevent学习--gevent数据结构及实战(三)
gevent学习系列第三章,前面两章分析了大量常用几个函数的源码以及实现原理.这一章重点偏向实战了,按照官方给出的gevent学习指南,我将依次分析官方给出的7个数据结构.以及给出几个相应使用他们的例 ...