Juery 实现淡出 淡现效果

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="images/1.jpg" width="350" height="240" /></a></li>
    <li><a href="#" target="_blank"><img src="images/2.jpg" width="350" height="240" /></a></li>
    <li><a href="#" target="_blank"><img src="images/3.jpg" width="350" height="240" /></a></li>
    <li><a href="#" target="_blank"><img src="images/4.jpg" width="350" height="240" /></a></li>
    <li><a href="#" target="_blank"><img src="images/5.jpg" width="350" height="240" /></a></li>
    <li><a href="#" target="_blank"><img src="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;}
    });
  });
原文地址:https://www.cnblogs.com/subtract/p/3750115.html