编程 Javascript

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程序设计有所帮助。

jquery简单实现幻灯片的方法

- Author -

jianwang19

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于JQuery的数字改变的动画效果--可用来做计数器

Aug 11 Javascript

JQuery页面随滚动条动态加载效果的简单实现(推荐)

Feb 08 Javascript

100多个基础常用JS函数和语法集合大全

Feb 16 Javascript

vue2 router 动态传参,多个参数的实例

Nov 10 Javascript

vuex 项目结构目录及一些简单配置介绍

Apr 08 Javascript

vue+webpack实现异步加载三种用法示例详解

Apr 24 Javascript

微信小程序实现富文本图片宽度自适应的方法

Jan 20 Javascript

Vue 前端实现登陆拦截及axios 拦截器的使用

Jul 17 Javascript

Vue如何使用混合Mixins和插件开发详解

Feb 05 Javascript

JavaScript实现PC端横向轮播图

Feb 07 Javascript

Javascript中的奇葩知识,你知道吗?

Jan 25 Javascript

JS中forEach()、map()、every()、some()和filter()的用法

May 11 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