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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
Cookie 小记
Apr 01 Javascript
js查找节点的方法小结
Jan 13 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
vue接口请求加密实例
Aug 11 Javascript
微信小程序使用前置摄像头拍照
Oct 22 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中用文本文件做数据库的实现方法
2008/03/27 PHP
url decode problem 解决方法
2011/12/26 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
JavaScript 数组详解
2013/10/10 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
Django中几种重定向方法
2015/04/28 Python
详细分析python3的reduce函数
2017/12/05 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
python实现整数的二进制循环移位
2019/03/08 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
安全检查与奖惩制度
2014/01/23 职场文书
教师批评与自我批评
2014/10/15 职场文书
业务内勤岗位职责
2015/04/13 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
《童年的发现》教学反思
2016/02/18 职场文书