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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
JavaScript数据类型详解
Apr 01 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
详解Js里的for…in和for…of的用法
Mar 28 Javascript
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 JSON 数据解析代码
2010/05/26 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
js判断变量是否空值的代码
2008/10/26 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
浅析vue数据绑定
2017/01/17 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python金融数据可视化汇总
2017/11/17 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
高级人员简历的自我评价分享
2013/11/03 职场文书
校三好学生主要事迹
2014/01/11 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
餐饮投资计划书
2014/04/25 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers