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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
几行js代码实现自适应
Feb 24 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
详解node中创建服务进程
May 09 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
一个简单的MySQL数据浏览器
2006/10/09 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
学习ExtJS table布局
2009/10/08 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
pandas带有重复索引操作方法
2018/06/08 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
国贸专业自荐信范文
2014/03/02 职场文书
财务总监岗位职责
2014/03/07 职场文书
药店促销活动总结
2014/07/10 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
受资助学生感谢信
2015/01/21 职场文书
大学生入党自荐书
2015/03/05 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android