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 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
Sample script that deletes a SQL Server database
Jun 16 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
js实现左右两侧浮动广告
Jul 09 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
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python实现将文本生成二维码的方法示例
2017/07/18 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
加热夹克:RAVEAN
2018/10/19 全球购物
后进生转化工作制度
2014/01/17 职场文书
单位未婚证明范本
2014/01/18 职场文书
一夜的工作教学反思
2014/02/08 职场文书
城管大队整治方案
2014/05/06 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js