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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
js表单登陆验证示例
Oct 19 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
python自动裁剪图像代码分享
2017/11/25 Python
python绘制立方体的方法
2018/07/02 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
职业生涯规划书范文
2014/03/10 职场文书
交通事故协议书范文
2014/04/16 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
品牌服务方案
2014/06/03 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
员工开除通知书
2015/04/25 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
详解JS数组方法
2021/11/20 Javascript
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB