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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
vue如何在data中引入图片的正确路径
Jun 05 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反转字符串函数strrev()函数的用法
2012/02/04 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
js单例模式的两种方案
2013/10/22 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
python简单实现获取当前时间
2016/08/27 Python
python3 拼接字符串的7种方法
2018/09/12 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
如何将json数据转换为python数据
2020/09/04 Python
环保专项行动方案
2014/05/12 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
公司市场部岗位职责
2015/04/15 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
家长意见书
2015/06/04 职场文书
小人国观后感
2015/06/11 职场文书
大学生党课感想
2015/08/11 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
高中体育课教学反思
2016/02/16 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
SQL写法--行行比较
2021/08/23 SQL Server
oracle重置序列从0开始递增1
2022/02/28 Oracle
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python