//isw2 zhouxianglh 2010.07.07
//移動ul
var slideOperate = {
  slideUlId : "",//UL id 用于操作Ul
  fadeInTime : 2000,//淡出淡入時間
  slideDownTime : 2000,//滑動時間
  nextLeft:function(){//往右滑動
    var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
    $(lastLi).find("div").animate({opacity:0});//隱藏最后一個li的內容
    $(lastLi).animate({width : "hide",height : lastLi.height()},function(){//隱藏最后一個li
      $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
    });
    $(lastLi).animate({width : "show"},{duration:slideOperate.fadeInTime,complete:function(){//顯示寬度
      lastLi.find("div").animate({opacity:1},slideOperate.fadeInTime);//顯示
    }});
  },
  nextDown:function(){//往下滑動(前提Ul豎排)
    var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
    $(lastLi).find("div").fadeOut();//隱藏最后一個li的內容
    $(lastLi).hide();//隱藏最后一個li
    $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
    $(lastLi).slideDown(slideOperate.slideDownTime,function(){
      lastLi.find("div").fadeIn(slideOperate.fadeInTime);
    });
  }
};

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=utf-8" />
    <title>列</title>
    <link href="css/slideRow.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript" src="js/jquery1.2.3.js"></script>
    <script language="javascript" type="text/javascript" src="js/slideRow.js"></script>
    <script language="javascript" type="text/javascript">
    $(document).ready(
      function(){
        slideOperate.slideUlId = "ulRowCount";
        setInterval("slideOperate.nextLeft()",5000);//定時
      }
    );
    </script>
  </head>
  <body>
    <ul id="ulRowCount">
      <li class="liRow">
        <div class="rowDiv">
          你好1
          <br />
          你好1
          <br />
          你好1
          <br />
          你好1
          <br />
        </div>
      </li>
      <li class="liRow">
        <div class="rowDiv">
          你好2
        </div>
      </li>
      <li class="liRow">
        <div class="rowDiv">
          你好5asdfasdf
          <br />
          你好5
          <br />
          你好5
          <br />
          你好5
          <br />
          <br />
          你好5
          <br />
          <br />
          你好5dsfasdfasdfas
          <br />
        </div>
      </li>
    </ul>
  </body>
</html>

PS：這里再為大家推薦幾款代碼格式化、美化工具，相信大家在以后的開發(fā)過程中會用得到：

在線JavaScript代碼美化、格式化工具：
http://tools.jb51.net/code/js

JavaScript壓縮/格式化/加密工具：
http://tools.jb51.net/code/jscompress

XML代碼在線格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat

json代碼在線格式化/美化/壓縮/編輯/轉換工具：
http://tools.jb51.net/code/jsoncodeformat

在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章: