jquery实现简单的自动播放幻灯片效果

更新时间：2015年06月13日 13:41:57 作者：不吃皮蛋

这篇文章主要介绍了jquery实现简单的自动播放幻灯片效果,较为详细的介绍了html页面布局、css样式设置及jQuery控制自动播放幻灯的相关技巧,需要的朋友可以参考下

本文实例讲述了jquery实现简单的自动播放幻灯片效果。分享给大家供大家参考。具体实现方法如下：

html部分：

<div id="slideshow">
  <div>
   <img src="images/5224/5658667829_2bb7d42a9c_m.jpg">
  </div>
  <div>
   <img src="images/5230/5638093881_a791e4f819_m.jpg">
  </div>
  <div>
   Pretty cool eh? This slide is proof the content can be anything.
  </div>
</div>

CSS部分：

/* Slides need to be absolutely positioned within the wrapper.
This has a tiny bit of extra pizazz: */
#slideshow {
  margin: 50px auto;
  position: relative;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

jQuery部分：

//Run after DOM is ready.
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
 $('#slideshow > div:first')
  .fadeOut(1000)
  .next()
  .fadeIn(1000)
  .end()
  .appendTo('#slideshow');
}, 3000);

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

您可能感兴趣的文章:

jQuery实现的瀑布流加载效果示例
这篇文章主要介绍了jQuery实现的瀑布流加载效果,结合实例形式分析了jQuery基于数学运算与事件响应实现页面瀑布流加载的功能,需要的朋友可以参考下
2016-09-09
jquery序列化form表单使用ajax提交后处理返回的json数据
这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下
2014-03-03
jQuery动态加载css文件实现方法
使用jQuery来加载一个外部的 css 文件，首先创建一个 link 元素，并将它添加到标记中即可。那么基于jquery代码如何实现呢？下面小编给大家介绍jQuery动态加载css文件实现方法，需要的朋友参考下吧
2016-06-06
jQuery中(function($){})(jQuery)详解
本文通过具体示例向大家详细介绍了jQuery中的(function($){})(jQuery)的用法和意义，对此有相同困惑的小伙伴可以参考下本文。
2015-07-07
jQuery EasyUI API 中文文档搜索框
jQuery EasyUI API 中文文档搜索框 SearchBox 搜索框使用介绍，需要的朋友可以参考下。
2011-09-09
即将发布的jQuery 3 有哪些新特性
本文主要介绍jQuery 3中一些新增的特性和一些变更的特性，以及一些废弃删除的特性，另外介绍了jQuery 3.0 最大的变化就是彻底放弃对 IE8 的支持，大家可以先看一下。
2016-04-04
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
使用jquery控制CSS样式,并且取消Css样式的一个简单小实例，需要的朋友可以参考下
2013-07-07
简单分析javascript面向对象与原型
为了说明 JavaScript 是一门彻底的面向对象的语言，首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念：1.一切事物皆对象，2.对象具有封装和继承特性，3.对象与对象之间使用消息通信，各自存在信息隐藏
2015-05-05
jQuery实现base64前台加密解密功能详解
这篇文章主要介绍了jQuery实现base64前台加密解密功能,结合实例形式分析了jquery.base64.js实现前台base64加密与解密功能的实现方法,并给出了java实现后台base64加密解密的操作示例对比验证加密效果,需要的朋友可以参考下
2017-08-08
jQuery实现搜索页面关键字的功能
这篇文章主要为大家详细介绍了jQuery实现搜索页面关键字的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02