Jquery 图片走马灯效果原理
本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑。待会讲解
照例先上代码:
HTML:
<div class="box">
<div style="width: 1000px;" id="boxdiv">
<ul>
<li style="display: block;" title="晚霞中的民航飞机"><a href="#">
<img src="http://5.26923.com/download/pic/000/337/f2418c0850058ff9edb2bb85e30be1cb.jpg" /></a></li>
<li title="波音787"><a href="#">
<img src="http://5.26923.com/download/pic/000/337/8d96f0fc8a9f2f9e5af628ec4b9ef64e.jpg" /></a></li>
<li title="一起去旅行"><a href="#">
<img src="http://5.26923.com/download/pic/000/338/14533ca737e6b63c0abe3ee4dc22b6a4.jpg" /></a></li>
</ul>
</div>
</div>
在<div class="box">中,再包含了一个div,且设置了一个很比较大的宽度,是为了解决一个在垂直走马灯下没有的坑。该坑的效果是在li标签float为left的情况,不要里面的DIV,会出现图片轮播后,显示中的最后一张图片由下向上的跳动效果,这是float的本身特性造成的,因为父元素宽度不够的情况下,后面的元素会自动往下左沉下去,一旦上面宽度够了,就会自动飘上来,这个飘就会造成显示中的最后一张图片的跳动效果,所以采用内部嵌套一个DIV 并设置<div class="box">的overflow CSS样式来解决该问题。
CSS:
.box
{
width: 800px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
overflow: hidden;
} .box img
{
border-style: none;
height: 200px;
} .box ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
} .box ul li
{
float: left;
}
脚本:
<script type="text/javascript">
$(document).ready(function () {
new ZouMa().Start();
});
function ZouMa() {
this.maxLength = 3; //最低显示数
this.Timer = 2000;//计时器间隔时间
this.Ul = $(".box ul"); var handId;//计时器id
var self = this;
this.Start = function () {
if (self.Ul.children().length < this.maxLength) {
self.Ul.append(self.Ul.children().clone());
}
handId = setInterval(self.Play, self.Timer);
}
this.Play = function () {
var img = self.Ul.children().eq(0);
var left = img.children().eq(0).width();
img.animate({ "marginLeft": (-1 * left) + "px" }, 600, function () {
//appendTo函数是实现走马灯一直不间断播放的秘诀。
//目前网上看到的很多走马灯,走到最后一张的时候,会立马闪回第一张,而不是继续从后往前推进,即是没有明白该函数的作用的原因
$(this).css("margin-left", "auto").appendTo(self.Ul);
});
}
}
</script>
此处照例使用了jquery的动画效果函数animate来实现走马灯效果,并配合appendTo函数来实现无尽播放的效果。
有关appendTo函数的作用请参阅jquery的API文档,animate也请参阅API文档
Jquery 图片走马灯效果原理的更多相关文章
- 10款好用的 jQuery 图片切换效果插件
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
- 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果
实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
- [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...
- Jquery 图片轮播实现原理总结
Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...
- jquery带按钮的图片切换效果
<!doctype html> <html> <head> <meta charset="gb2312"> <title> ...
- jQuery实现图片放大镜效果
实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...
- jQuery实现鼠标经过图片变亮效果
在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...
随机推荐
- C++学习基础十六-- 函数学习笔记
C++ Primer 第七章-函数学习笔记 一步一个脚印.循序渐进的学习. 一.参数传递 每次调用函数时,都会重新创建函数所有的形参,此时所传递的实参将会初始化对应的形参. 「如果形参是非引用类型,则 ...
- linux 杀死进程kill 等用法
kill -9 $(ps -ef | grep process_name | grep -v grep | awk '{print $2}') 稍微解释一下: awk '{print $2} ...
- Linux网络编程学习(六) ----- 管道(第四章)
1.管道的定义 管道就是将一个程序的输出和另外一个程序的输入连接起来的单向通道,比如命令: ls -l|more,就建立了一个管道,获取ls -l的输出作为more的输入,数据就沿着管道从管道的左边流 ...
- 《深入理解JAVA虚拟机》----------第二章 JAVA内存区域与内存溢出异常,笔记(下)
2. HotSpot虚拟机对象探秘 2.1 对象的创建 虚拟机遇到一条New指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初 ...
- Nginx搭建
Nginx nginx是一个开源的,支持高性能,高并发的www服务和代理服务软件. nginx因具有高并发(特别是静态资源),占用系统资源少等特性,且功能丰富而逐渐流行起来. nginx不但是一个优秀 ...
- numpy.asmatrix的用法
学习的过程中,遇到了asmatrix的用法,看了一下官方文档,明白了. numpy.asmatrix numpy.asmatrix(data, dtype=None)[source] Interpre ...
- Quartz使用
背景 很多时候,项目需要在不同时刻,执行一个或很多个不同的作业. Windows执行计划这时并不能很好的满足需求了,迫切需要一个更为强大,方便管理,集群部署的作业调度框架. 介绍 Quartz一个开源 ...
- 初学c# -- 纯属无聊,写下棋
纯属无聊了,会下的棋都做了. 象棋围棋修改用法都一样. 1.先启动服务端 goServer.exe服务端:地址为IPAddress[] addrIP = Dns.GetHostAddresses(&q ...
- 20175314 《Java程序设计》第二周学习总结
20175314 <Java程序设计>第二周学习总结 教材学习内容总结 我在APPstore上发现了一个可以支持我们在IOS系统上学习实践Java程序的开发环境,只需要购买专业版就可以使用 ...
- 用归并排序或树状数组求逆序对数量 poj2299
题目链接:https://vjudge.net/problem/POJ-2299 推荐讲解树状数组的博客:https://blog.csdn.net/int64ago/article/details/ ...