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 ...
随机推荐
- linux书籍
<鸟哥私房菜-基础版> <实战LINUX_SHELL编程与服务器管理> <LINUX命令行与SHELL脚本编程大全第2版].布卢姆.扫描版> <Linux初学 ...
- spring boot之mybatis配置
配置在application.yml文件中 mybatis-plus: # 如果是放在src/main/java目录下 classpath:/com/yourpackage/*/mapper/*Map ...
- 12.10 Daily Scrum
各种大作业,进度会放缓一些. Today's Task Tomorrow's Task 丁辛 完善餐厅列表,显示距离. 实现和菜谱相关的餐厅列表. 邓亚梅 ...
- Week3 关于“微软必应词典客户端”的案例分析
第一部分 调研,评测 一.iphone客户端的bug挖掘: 1.在例句中点击单词或短语,如果这个时候点得稍微快了一点,关联相应的翻译时会出现混乱. 经过调查发现,这个bug应该是必应得一个全平台错误 ...
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- HTML 5 Canvas vs. SVG
pick up from http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 与 SVG 的比较 下表列出了 canvas ...
- Red Hat 5.8 CentOS 6.5 共用 输入法
pick up from http://jingyan.baidu.com/article/20b68a885a3607796cec622c.html
- charCodeAt与fromCharCode
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码 这个返回值是 0 - 65535 之间的整数. stringObject.charCodeAt(index) /* a-z ...
- Personal Software Process (PSP)
日期 分类 开始时间 结束时间 中断时间 净时间 活动 备注 C U 2016/03/15 随笔 9:30 10:40 0 70 博客更新 更新<软件项目管理(1)> Y Minute 随 ...
- python对redis的常用操作 下 (无序集合,有序集合)
无序集合: 首先介绍增加,删除和获得所有元素的方法.我将会用第二部分来讨论集合的特殊操作: In [136]: x.sadd("challenge", 1,2,3,4,5,6,7, ...