jquery简单实现幻灯片的方法


Posted in Javascript onAugust 03, 2015

本文实例讲述了jquery简单实现幻灯片的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<style type="text/css">
.slide{position: relative; overflow: hidden;}
.slide img{max-width: 100%; position: absolute; left: 0; top: 0;}
.slide img:first-child{position: relative; visibility: visible;}
</style>
</head>
<body>
<div class="slide">
 <img src="images/172233f3cyzidsc8rl8irz.jpg" />
 <img src="images/172231vxzvzz2xvk92d5m0.jpg" />
 <img src="images/172228jybldywbdwdflfzm.jpg" />
 <img src="images/172223i8otbbsot8b232o5.jpg" />
</div>
<script type="text/javascript">
var size = $('.slide img').size();
var _index = size;
var timer = null;
 $('.slide').append($('.slide img:eq(0)').clone());
  timer = setInterval(function(){
    $('.slide img').eq(_index).fadeOut(800);
    _index == 1?_index=size:_index--;
    $('.slide img').eq(_index).fadeIn(800);
  },4000);
</script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript 闭包疑问
Dec 30 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
JS拖拽插件实现步骤
Aug 03 #Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 #Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 #Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 #Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 #Javascript
JavaScript图片轮播代码分享
Jul 31 #Javascript
简单实现异步编程promise模式
Jul 31 #Javascript
You might like
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
js document.write()使用介绍
2014/02/21 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
pygame播放音乐的方法
2015/05/19 Python
Python读写unicode文件的方法
2015/07/10 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python win32 简单操作方法
2017/05/25 Python
Django实现快速分页的方法实例
2017/10/22 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python操作redis方法总结
2018/06/06 Python
python数组循环处理方法
2019/08/26 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
单位未婚证明范本
2014/01/18 职场文书
小学语文教研活动总结
2014/07/01 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
golang中的struct操作
2021/11/11 Golang