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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
React中获取数据的3种方法及优缺点
Feb 18 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 强制下载文件代码
2010/10/24 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
校运动会广播稿300字
2014/10/07 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技