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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 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 无极分类(递归)实现代码
2010/01/05 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
python控制台显示时钟的示例
2014/02/24 Python
Python内置数据类型详解
2014/08/18 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python 转义字符详细介绍
2017/03/21 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
大学生如何写自荐信
2014/01/08 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
授权委托书协议书
2014/10/16 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
告知书格式
2015/07/01 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers
MySQL查询日期时间
2022/05/15 MySQL