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


Posted in Javascript onJune 13, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 #Javascript
jQuery实现的五子棋游戏实例
Jun 13 #Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 #Javascript
JQuery自动触发事件的方法
Jun 13 #Javascript
JQuery中DOM实现事件移除的方法
Jun 13 #Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 #Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 #Javascript
You might like
php构造函数实例讲解
2013/11/13 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
php探针不显示内存解决方法
2019/09/17 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
带你认识Django
2019/01/15 Python
Python中字符串List按照长度排序
2019/07/01 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
端午节演讲稿
2014/05/23 职场文书
男人帮观后感
2015/06/18 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
开学第一周值周总结
2015/07/16 职场文书
开网店计划分析
2019/07/30 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript