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操作之兼容技巧分享
Sep 20 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
vue 文件目录结构详解
Nov 24 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 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高手?学会“懒惰”的编程
2006/12/05 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
Javascript继承机制详解
2017/05/30 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python检测远程服务器tcp端口的方法
2015/03/14 Python
python二分查找算法的递归实现方法
2016/05/12 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
出国留学自荐信
2013/10/25 职场文书
营业经理岗位职责
2013/11/10 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
采购求职信
2014/03/17 职场文书
六一亲子活动总结
2014/07/01 职场文书
《植树问题》教学反思
2016/03/03 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
JavaScript 对象创建的3种方法
2021/11/17 Javascript
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js
Python 匹配文本并在其上一行追加文本
2022/05/11 Python