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 相关文章推荐
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
详解vue-cli3使用
Aug 14 Javascript
如何正确理解vue中的key详解
Nov 02 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
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
vue-router 权限控制的示例代码
2017/09/21 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
高校教师思想汇报
2014/01/11 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
优秀员工推荐信
2014/05/10 职场文书
体育专业自荐书
2014/05/29 职场文书
党员教师一句话承诺
2014/05/30 职场文书
会议欢迎标语
2014/06/30 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
2014年英语工作总结
2014/12/20 职场文书
家长意见书
2015/06/04 职场文书