jquery.imageScroller实现图片滚动

jQuery的一个不错的小插件，jquery.imageScroller.js代码：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>jQuery无缝滚动</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
  7.     <script type="text/javascript" src="http://img.rbtvs.com/js/jquery.imageScroller.js"></script>
  8.     <style type="text/css">
  9.         *
  10.         {
  11.             list-style: none;
  12.             font-size: 12px;
  13.             padding: 0;
  14.             margin: 0;
  15.         }
  16.         
  17.         #list li
  18.         {
  19.             width: 90px;
  20.             height: 18px;
  21.             line-height: 18px;
  22.             text-align: center;
  23.             padding: 41px 0;
  24.             float: left;
  25.             margin: 0 5px;
  26.             background-color: Aqua;
  27.         }
  28.         
  29.         #btnPrev, #btnNext, #listBox
  30.         {
  31.             float: left;
  32.         }
  33.         
  34.         #btnPrev, #btnNext
  35.         {
  36.             width: 30px;
  37.             height: 18px;
  38.             line-height: 18px;
  39.             padding: 41px 0;
  40.             background: #ff9;
  41.             text-align: center;
  42.         }
  43.         
  44.         #listBox
  45.         {
  46.             width: 400px;
  47.             height: 100px;
  48.             overflow: hidden;
  49.             background: #000;
  50.         }
  51.         
  52.         #container
  53.         {
  54.             width: 460px;
  55.             height: 100px;
  56.             background: red;
  57.             position: absolute;
  58.             left: 50%;
  59.             top: 50%;
  60.             margin-left: -230px;
  61.             margin-top: -50px;
  62.         }
  63.     </style>
  64.     <script type="text/javascript">

  66.         $(function () {
  67.             $("#listBox").imageScroller({
  68.                 next: "btnNext",
  69.                 prev: "btnPrev",
  70.                 frame: "list",
  71.                 child: "li",
  72.                 auto: true
  73.             });
  74.         });
  75.     </script>
  76. </head>
  77. <body>
  78.     <div id="container">
  79.         <div id="btnNext" title="上一个">
  80.             <<
  81.         </div>
  82.         <div id="listBox">
  83.             <ul id="list">
  84.                 <li>001</li>
  85.                 <li>002</li>
  86.                 <li>003</li>
  87.                 <li>004</li>
  88.                 <li>005</li>
  89.                 <li>006</li>
  90.                 <li>007</li>
  91.                 <li>008</li>
  92.                 <li>009</li>
  93.             </ul>
  94.         </div>
  95.         <div id="btnPrev" title="下一个">
  96.             >>
  97.         </div>
  98.     </div>
  99. </body>
  100. </html>
复制代码
在线演示：

如果您不想当成插件来用，里面的代码也可以单独扒出来(麦考林首页就是这么用的)
posted @ 2012-10-13 18:13  weiwei~  阅读(492)  评论(0)  编辑  收藏  举报