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去掉前后空格的实例
Nov 07 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
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 组件化编程技巧
2009/06/06 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
vue--vuex详解
2019/04/15 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
JS实现简单打字测试
2020/06/24 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
Python ATM功能实现代码实例
2020/03/19 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
python 实现两个线程交替执行
2020/05/02 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
如何用Python绘制3D柱形图
2020/09/16 Python
python 实现图片批量压缩的示例
2020/12/18 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
体育老师的教学自我评价分享
2013/11/19 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
经费申请报告
2015/05/15 职场文书
中学校园广播稿
2015/08/18 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS