HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta http-equiv="Cache-Control" content="no-transform " />

<title>无标题文档</title>

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

<style type="text/css">

ul,ol,li{list-style:none;}

  .box{width:320px; height:240px;}

  .box ul li {float:left; position:absolute; display:none;width:320px; height:240px;}

</style>

</head>

<body>

<div class="box">

  <ul>

    <li><a href="#" target="_blank"><img src="data:images/1.jpg" width="350" height="240" /></a></li>

    <li><a href="#" target="_blank"><img src="data:images/2.jpg" width="350" height="240" /></a></li>

    <li><a href="#" target="_blank"><img src="data:images/3.jpg" width="350" height="240" /></a></li>

    <li><a href="#" target="_blank"><img src="data:images/4.jpg" width="350" height="240" /></a></li>

    <li><a href="#" target="_blank"><img src="data:images/5.jpg" width="350" height="240" /></a></li>

    <li><a href="#" target="_blank"><img src="data:images/6.jpg" width="350" height="240" /></a></li>

  </ul>

</div>

<input class="prev" type="button" value="向上" />

<input class="next" type="button" value="向下" />

</body>

</html>

<strong></strong>

Javascript:

$(function(){

    var Get_next_j=$('.box ul li');

      var Set_css_item={'display':'list-item','position':'relative','float':'left'};

    var Set_css_none={'display':'list-item','position':'absolute','float':'left'};

    var Set_time=2000;

    var i=0;

    Get_next_j.first().css(Set_css_item);

    $('.next').click(function(){

      if(!Get_next_j.eq(i).next().html())

      {

         Get_next_j.last().fadeOut(Set_time).css(Set_css_none);

         Get_next_j.first().fadeIn(Set_time).css(Set_css_item);

         i=0;

      }

      else{

       Get_next_j.eq(i).fadeOut(Set_time).css(Set_css_none);

       Get_next_j.eq(i).next().fadeIn(Set_time).css(Set_css_item);

       i=i+1;}

    });

    $('.prev').click(function(){

      if(i==0){

       Get_next_j.first().fadeOut(Set_time).css(Set_css_none);

       Get_next_j.last().fadeIn(Set_time).css(Set_css_item);

       Get_next_j.each(function(index,element){

         i=index;

       });

      }

      else{

       Get_next_j.eq(i).fadeOut(Set_time).css(Set_css_none);

       Get_next_j.eq(i).prev().fadeIn(Set_time).css(Set_css_item);

       i=i-1;}

    });

  });

Juery 实现淡出 淡现效果的更多相关文章

  1. 类似UC天气下拉和微信下拉眼睛头部弹入淡出UI交互效果（开源项目）。

    Android-PullLayout是github上的一个第三方开源项目,该项目主页是:https://github.com/BlueMor/Android-PullLayout  原作者项目意图实现 ...

  2. QT窗口渐现效果，窗口震动效果，鼠标移动窗口

    //窗口渐现效果void MainWindow::closeWindowAnimation() //关闭窗口效果 { QPropertyAnimation *animation = new QProp ...

  3. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery练手：仿新浪微博图片文字列表淡进淡出上下滚动效果

    1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下 ...

  5. Unity3D中UGUI不使用DOTween制作渐隐渐现效果

    在做UI后期设计时,我们可能要对UI做一些特效,这篇文章我们来学习下如何在Unity3d中对实现渐隐渐现的效果, 首先我们看下Unity New UI即UGUI中渐隐渐现的做法. 观察我们会发现Uni ...

  6. WPF实现渐变淡入淡出的动画效果

    1.实现原理 1.1 利用UIElement.OpacityMask属性,用于改变对象区域的不透明度的画笔.可以使元素的特定区域透明或部分透明,从而实现比较新颖的效果. 1.2 OpacityMask ...

  7. WinForm利用 WinApi实现 淡入淡出 弹出 效果 仿QQ消息

    消息框: using System.Runtime.InteropServices; namespace Windows_API_实现屏幕右下角_消息框_ { public partial class ...

  8. 在Unity5中使用C#脚本实现UI的下滑、变色、渐隐渐现效果

    一.首先,我们先创建一个Text    依次选择Component→UI→Text创建一个Text,创建完成后如下: 二.创建完成后,在Project面板点击Create→C# Script,本例命名 ...

  9. css3 hover平滑过渡效果，鼠标经过元素，背景渐隐渐现效果

    下面实例,演示,鼠标经过时,改变div宽度,平滑改变,带动画 div { width:100px; height:100px; background:blue; transition:width 2s ...

随机推荐

  1. SpringMVC（二）传值

    1.HelloController.java 通过model.addAttribute(key,value)进行传值 package zttc.itat.controller; import org. ...

  2. 宇宙最帅叉叉——第五周博客 for 测试与发布（Alpha版本）

    Alpha版本测试报告 1.在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个? a.修复的BUG UDP传输 recvfrom 当没有消息来的时候一直循环等待因其阻塞 ,时间戳无效了. ...

  3. 打开ahci模式

    打开ahci模式(sata)的正确步骤:    1.安装系统前在bios中将硬盘模式设置为ide兼容模式(别说你不会哦),然后安装系统,建议安装微软原版系统或是官方oem原版系统:    2.系统安装 ...

  4. pat 集合相似度

    L2-005. 集合相似度 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定两个整数集合,它们的相似度定义为:Nc/Nt*1 ...

  5. java.lang.NoClassDefFoundError: Could not initialize class org.jfree.chart.JFreeChart

    最近在进行利用jfreechart生成图表时发现,项目在本地运行的好好的,一部署到服务器(linux系统)上就不行,报这样的错误: java.lang.NoClassDefFoundError: Co ...

  6. Python_常用的正则表达式处理函数

    正则表达式就是用查找字符串的,它能查找规则比较复杂的字符串反斜杠:正则表达式里面用"\"作为转义字符. s='<a class="h3" href=&qu ...

  7. Cookie注入实战（非SQL注入）

    cookie注入原理其实很简单,就是利用了session机制中的特性,只能说是特性,不能算是漏洞. 这里简单的说下原理,session的机制就相当于你有一张蛋糕店的会员卡,这张会员卡就是你浏览器中的c ...

  8. XCODE中使用Main.Storyboard拉入控件并实现事件（Swift语言）

    如何在XCODE中的Main.Storyboard内拉入控件并实现一个简单的效果呢?本人由于刚接触Swift语言不久,对于IDE的操作还是很生疏,不懂了就在网上参考了网上前辈们的文章.以下我将演示如何 ...

  9. E - 追求

    经历了那晚的竹林深处相识后静竹对数学念念不忘,产生了好感!为了追求数学,她想到了一招,要想搞定女友,搞定闺中密友.于是,她秘密与数学的好友斐波那契见面了.学数学的真是不一样,斐波那契的出现前提也是需要 ...

  10. RabbitMQ在windows下的安装

    RabbitMQ 它依赖于Erlang,需要先安装Erlang.首先确定你的window电脑是32位还是64位,以下的安装以window 64位电脑举例.   运行行Erlang/OTP(otp_wi ...