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. WindowsLiveWriter安装步骤

    WindowsLiveWriter 安装WindowsLiveWriter.exe http://www.cnblogs.com/rhxuza1993/

  2. string logo online customization

    url: http://www.asciiarts.net/ example :  hello

  3. bzoj2014

    题解: 按照单价排序 然后贪心 代码: #include<bits/stdc++.h> using namespace std; ; typedef long long ll; ll an ...

  4. ADOX创建ACCESS 表时，几个附加属性

     中文  英文 允许空字符串 Jet OLEDB:Allow Zero Length Unicode压缩 Jet OLEDB:Compressed UNICODE Strings 有效性规则 Jet ...

  5. dnspod 动态域名的使用。openwrt使用dnspod动态域名解析。

    这里主要说的是linux shell下的使用. 先看接口说明: 接口地址: https://dnsapi.cn/Record.Ddns HTTP请求方式: POST 请求参数: 公共参数 domain ...

  6. 《Python》 基础数据类型和for循环

    一.基础数据类型 总览 int:用于计算,计数,运算等.1.2.3.100... str:‘这些内容’,用于少量数据的存储,便于操作. bool:True,False,两种状态,机器反馈给用户的对,错 ...

  7. 玩转树莓派：OpenHAB的入门（一）

    如果你对那些仅仅只是为了控制一盏灯而不得不下载一个特定的App的智能家居感到厌烦,这里有个好消息:OpenHAB可以为你实现最灵活的控制智能家居,OpenHAB是一个成熟的,开源的家庭自动化平台,既可 ...

  8. [转载]三款SDR平台对比：HackRF，bladeRF和USRP

    这篇文章是 Taylor Killian 13年8月发表在自己的博客上的.他对比了三款平价的SDR平台,认为这三款产品将是未来一年中最受欢迎的SDR平台.我觉得这篇文章很有参考价值,简单翻译一份转过来 ...

  9. C++/C 宏定义（define）中# ## 的含义 宏拼接

    C++/C 宏定义(define)中# ## 的含义 define 中的# ## 一般是用来拼接字符串的,但是实际使用过程中,有哪些细微的差别呢,我们通过几个例子来看看. #是字符串化的意思,出现在宏 ...

  10. OC基础:数组.字典.集 分类： ios学习 OC 2015-06-18 18:58 47人阅读 评论(0) 收藏

    ==============NSArray(不可变数组)=========== NSArray,继承自NSObject  用来管理(储存)一些有序的对象,不可变数组. 创建一个空数组 NSArray ...