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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
js选择器全面解析
2016/06/27 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
对javascript继承的理解
2016/10/11 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
Python的一些用法分享
2012/10/07 Python
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
在校生自我鉴定
2014/01/23 职场文书
党员承诺书怎么写
2014/05/20 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
vue判断按钮是否可以点击
2022/04/09 Vue.js