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. Quartz定时任务和IIS程序池闲置超时时间冲突解决方案

    一.问题描述 Bs项目中用Quartz功能执行一个定时任务(每隔5分钟执行一个Job),正常情况,Quartz定时任务会5分钟执行一次,但IIS程序池闲置 超时默认为20分钟,造成的结果是:定时任务只 ...

  2. 蓝桥杯—ALGO-122 未名湖畔的烦恼(枚举)

    问题描述 每年冬天,北大未名湖上都是滑冰的好地方.北大体育组准备了许多冰鞋,可是人太多了, 每天下午收工后,常常一双冰鞋都不剩. 每天早上,租鞋窗口都会排起长龙,假设有还鞋的m个,有需要租鞋的n个. ...

  3. ssh的配置，ssh打开密钥登陆，关闭密码登陆。

    刚装玩fedora,那么我们就以fedora为例来说一下怎么配置: 1.先确认是否已安装ssh服务: [root@localhost ~]# rpm -qa | grep openssh-server ...

  4. celery（一）分布式任务调度模块简介及运行环境

    Celery是Python开发的分布式任务调度模块. Celery本身不含消息服务,它使用第三方消息服务来传递任务. django下有个分支Django-Celery,可以结合django来实现任务的 ...

  5. 技术揭秘“QQ空间”自动转发不良信息

    大家经常会看到QQ空间自动转发一些附带链接的不良信息,即便我们的QQ密码并没有被盗取.最近通过对一个QQ空间自动转发链接进行分析,发现该自动转发机制通过利用腾讯网站存在漏洞的页面,精心构造出利用代码获 ...

  6. 离线使用Visual Studio的Javascript Prettier插件

    用Prettier插件来格式化Javascript代码效果好的不得了,简直是强迫症的救命克星,可惜单位的电脑是不联网的,始终用不了,今天抽空研究了一下,找到办法了. 1.下载JavaScript Pr ...

  7. SWIFT中切換UIContainerView內的Controller

    如下,一个UIContainerView内切换两个Controller,当点击登录的时候UIContainerView的视图为LoginController,当点击登记的时候UIContainerVi ...

  8. SWIFT中获取当前经伟度

    很多的APP中都会用到用户的当前位置信息,本文将实现这个小功能 import UIKit import CoreLocation //添加引用 class ViewController: UIView ...

  9. OC基础:block.字面量 分类： ios学习 OC 2015-06-22 19:08 155人阅读 评论(0) 收藏

    block 块语法,可以用block去保存一段代码,或者封装一段代码. block 实际是由c语言实现的,执行效率很高. block 实际借鉴了函数指针的语法. block,在多线程.异步任务,集合遍 ...

  10. [python]自问自答：python -m参数？ （ python3.7 版本 ）

    最近在看Python代码的时候看到了一种形式, 即  python -m    这种形式,   查了一些博客,发现了一篇写的还不错,转载了过来,不过那里面写的是Python2.7的环境和python3 ...