jquery简单图片切换显示效果实现方法


Posted in Javascript onJanuary 14, 2015

本文实例讲述了jquery简单图片切换显示效果实现方法,分享给大家供大家参考。具体实现方法如下:

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>jquery图片切换效果</title>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

 $(function(){

  $("#item li:not(:first)").css("display","none");//只显示第一张图片,其它隐藏

  var bb = $("#item li:last");

  var aa = $("#item li:first");

  setInterval(function(){

   if(bb.is(":visible")){

    aa.fadeIn(1000).addClass("in");

    bb.hide();

   }else{

    $("#item li:visible").addClass("in");

    $("#item li.in").next().fadeIn(1000);

    $("#item li.in").fadeOut(1000).removeClass("in");

   }

  },3000);

 });

</script>

</head>

<style type="text/css">

li{list-style:none;display:block;width:500px;border:1px solid #ccc;padding:5px;}

.in{display:block;}

</style>

<body>

 <ul id="item">

  <li><img src="./images/11_b.jpg" /></li>

  <li><img src="./images/22_b.jpg" /></li>

  <li><img src="./images/33_b.jpg" /></li>

  <li><img src="./images/44_b.jpg" /></li>

 </ul>

</body>

</html>

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

Javascript 相关文章推荐
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
原生js实现放大镜组件
Jan 22 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
Node.js开发之访问Redis数据库教程
Jan 14 #Javascript
Backbone.js中的集合详解
Jan 14 #Javascript
jquery增加和删除元素的方法
Jan 14 #Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 #Javascript
jQuery中Ajax的load方法详解
Jan 14 #Javascript
jquery获取当前日期的方法
Jan 14 #Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 #Javascript
You might like
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
关于js遍历表格的实例
2013/07/10 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
Python异常学习笔记
2015/02/03 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python3中exp()函数用法分析
2019/02/19 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
python绘制彩虹图
2019/12/16 Python
Python原始套接字编程实例解析
2020/01/29 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
外贸业务员求职信范文
2013/12/12 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
师范教师毕业鉴定
2014/01/13 职场文书
《在家里》教后反思
2014/03/01 职场文书
医德考评自我评价
2014/09/14 职场文书
董事会决议范本
2015/07/01 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
浅析Django接口版本控制
2021/06/26 Python
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫