jQuery实现图片走马灯效果的原理分析


Posted in Javascript onJanuary 16, 2016

本文实例分析了jQuery实现图片走马灯效果的原理。分享给大家供大家参考,具体如下:

这里只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑。待会讲解

先上代码:

HTML:

<div class="box">  
  <div style="width: 1000px;" id="boxdiv">
   <ul>
    <li style="display: block;" title="清灵少女宛如梦境仙女"><a href="#">
     <img src="images/110927/11-11092G32227.jpg" /></a></li>
    <li title="美女海边性感透视装诱惑"><a href="#">
     <img src="images/130621/1-130621145931-50.jpg" /></a></li>
    <li title="夏小薇:百变小魔女变身性感数码宝贝"><a href="#">
     <img src="images/130620/19-130620115013.jpg" /></a></li>
    <li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#">
     <img src="images/130315/5-130315135240.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程序设计有所帮助。

Javascript 相关文章推荐
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
vue路由拦截及页面跳转的设置方法
May 24 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 #Javascript
input点击后placeholder中的提示消息消失
Jan 15 #Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 #Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 #Javascript
利用CSS3在Angular中实现动画
Jan 15 #Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 #Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 #Javascript
You might like
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
解决中英文字符串长度问题函数
2007/01/16 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
php跨站攻击实例分析
2014/10/28 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
JavaScript事件委托用法分析
2015/01/24 Javascript
js性能优化技巧
2015/11/29 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Django REST framework 分页的实现代码
2019/06/19 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
Python timeit模块原理及使用方法
2020/10/10 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
四个太阳教学反思
2014/02/01 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS