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 ...
随机推荐
- Codeforces Round #503 (by SIS, Div. 2)-C. Elections
枚举每个获胜的可能的票数+按照花费排序 #include<iostream> #include<stdio.h> #include<string.h> #inclu ...
- 《Linux内核分析与实现》 第五周 读书笔记
第3章 进程管理 20135307张嘉琪 3.1 进程 进程就是处于执行期的程序(目标码存放在某种存储介质上),但进程并不仅仅局限于一段可执行程序代码.通常进程还要包含其他资源,像打开的文件,挂起的信 ...
- 同步手绘板——android端下笔后颜色变化
实现效果 : 在设计之初我们以为是改变笔线条的粗细来实现类似效果,后来通过找其他相关软件比对发现是不改变线条的粗细,通过改变透明度实现下笔后颜色的渐变,虽然已实现,但渐变效果很一般,不流畅,算法还待优 ...
- David Silver强化学习Lecture1:强化学习简介
课件:Lecture 1: Introduction to Reinforcement Learning 视频:David Silver深度强化学习第1课 - 简介 (中文字幕) 强化学习的特征 作为 ...
- c++中常见概念、关键字等的区别
(1).重载,覆盖和隐藏的区别: 重载主要是函数的重载,函数名相同,返回类型相同,但是函数形参不同,被调用时,根据函数形参决定调用原函数还是重载函数. 覆盖主要用在继承多态中,函数前加virtual关 ...
- 关于ArcGIS常用功能的实现
关于ArcGIS中常见的一些功能的总结,一般首先在前台中放置地图,代码如下所示: <esri:Map Grid.Row="0" Grid.Column="0&quo ...
- 《使用swoole》
第一 在windows系统搭建swoole环境: 首先,安装cygwin:步骤截图如下 其次,使用cygwin安装swoole: 打开cygwin的终端,进入~目录,并将swoole-src上传到~目 ...
- Test Scenarios for result grid
1 Page loading symbol should be displayed when it is taking more than default time to load the resul ...
- filebeat 配置文件参数
filebeat 配置 所有的 beats 组件在 output 方面的配置都是一致的,之前章节已经介绍过.这里只介绍 filebeat 在 input 段的配置,如下: filebeat: sp ...
- linux 运维常用的一些命令收集
1.删除0字节文件find -type f -size 0 -exec rm -rf {} ; 2.查看进程按内存从大到小排列ps -e -o “%C : %p : %z : %a”|sort ...