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. learning shell built-in variables （1）

    Shell built-in variables [Purpose]        Learning shell built-in variables, example $0,$1,$2,$3,$#, ...

  2. Triangles 正多边形分割锐角三角形

    题目描述 已知一个圆的圆周被N个点分成了N段等长圆弧,求任意取三个点,组成锐角三角形的个数. 输入 多组数据,每组数据一个N(N <= 1000000) 输出 对于每组数据,输出不同锐角三角形的 ...

  3. C++设计模式之解释器模式

    2013年07月06日 19:43:00 阅读数:8853 概述: 未来机器智能化已然成为趋势,现在手机都能听懂英语和普通话,那我大中华几万种方言的被智能化也许也是趋势,我们的方言虽然和普通话相似,但 ...

  4. STL标准库-Move对容器效率的影响

    技术在于交流.沟通,本文为博主原创文章转载请注明出处并保持作品的完整性 C++11新增move()语法(我暂时交错右值引用),在前面我有一篇文章叫 C++11_右值引用 简单的介绍了右值引用类的实现, ...

  5. zabbix监控系统的应用---数据监控、导入模板、告警

    一.zabbix监控nginx服务 1)在server2中安装nginx服务 --->  rpm  -ivh  nginx-1.8.0-1.el6.ngx.x86_64.rpm 2)编辑配置文件 ...

  6. NodeJS 难点(网络,文件)的 核心 stream 三：readable ?

    什么是可读流 可读流    常见  读取磁盘文件.读取网络请求内容等,看一下前面介绍什么是流用的例子: const rs = fs.createReadStream(filePath); 我们常见的控 ...

  7. java.c++.c#.c的区别

    C++则一般看作是对C语言的扩展. Java语言是一种完全的面向对象语言,虽然它的底层(运行时库)是用C语言开发的,可是并不依赖于C. C#是微软开发的一种编程语言,语法类似Java,几乎就是从Jav ...

  8. File、Directory、Path

    File.Directory.Path https://blog.csdn.net/xiaouncle/article/details/52050577 File.Directory.Path是实际开 ...

  9. getParameter、getParameterValues、getParameterMap用法详解

    首先request中的参数parameter是一个map表,如下例 map={username=[xxx],password=[xxx],hobby=[eat,drink]} (1)当调用getPar ...

  10. gtx860M,cuda9路1080p多高斯运动检测测试

    多高斯背景差分,非常吃cpu,特别是多路视屏,所以想用gpu做检测 后面的跟踪一系列的规则判断用cpu opencv+cuda+stl做了个测试 代码: // MTTestCudaMog.cpp : ...