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

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

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

先上代码：

HTML：

<div class="box">  
  <div style="width: 1000px;" id="boxdiv">
   <ul>
    <li style="display: block;" title="清灵少女宛如梦境仙女"><a href="#">
     <img  src="/static/imghw/default1.png"  data-src="images/110927/11-11092G32227.jpg"  class="lazy" / alt="jQuery实现图片走马灯效果的原理分析_jquery" ></a></li>
    <li title="美女海边性感透视装诱惑"><a href="#">
     <img  src="/static/imghw/default1.png"  data-src="images/130621/1-130621145931-50.jpg"  class="lazy" / alt="jQuery实现图片走马灯效果的原理分析_jquery" ></a></li>
    <li title="夏小薇：百变小魔女变身性感数码宝贝"><a href="#">
     <img  src="/static/imghw/default1.png"  data-src="images/130620/19-130620115013.jpg"  class="lazy" / alt="jQuery实现图片走马灯效果的原理分析_jquery" ></a></li>
    <li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#">
     <img  src="/static/imghw/default1.png"  data-src="images/130315/5-130315135240.jpg"  class="lazy" / alt="jQuery实现图片走马灯效果的原理分析_jquery" ></a></li>
   </ul>
  </div>
</div>

在

中，再包含了一个div，且设置了一个很比较大的宽度，是为了解决一个在垂直走马灯下没有的坑。该坑的效果是在li标签float为left的情况，不要里面的DIV，会出现图片轮播后，显示中的最后一张图片由下向上的跳动效果，这是float的本身特性造成的，因为父元素宽度不够的情况下，后面的元素会自动往下左沉下去，一旦上面宽度够了，就会自动飘上来，这个飘就会造成显示中的最后一张图片的跳动效果，所以采用内部嵌套一个DIV 并设置

的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特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》与《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）

3 周前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最佳图形设置

2 周前 By 尊渡假赌尊渡假赌尊渡假赌

刺客信条阴影：贝壳谜语解决方案

1 周前 By DDD

R.E.P.O.如果您听不到任何人，如何修复音频

3 周前 By 尊渡假赌尊渡假赌尊渡假赌

在哪里可以找到原子中的起重机控制钥匙卡

1 周前 By DDD

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7415

15

CakePHP 教程

1359

52

steam的账户名称是什么格式

76

11

win11激活密钥永久

23

19

显示更多