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()取xml数据的小问题解决方法
Nov 20 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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文本操作类
2006/11/25 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
PHP编程函数安全篇
2013/01/08 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
mocha的时序规则讲解
2019/02/16 Javascript
Python fileinput模块使用实例
2015/05/28 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
详解Python字符串切片
2019/05/20 Python
python匿名函数的使用方法解析
2019/10/10 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
基于python实现对文件进行切分行
2020/04/26 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
AJax面试题
2014/11/25 面试题
应届毕业生求职信范例分享
2013/12/17 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
趣味运动会简讯
2015/07/20 职场文书
Python中的嵌套循环详情
2022/03/23 Python