zoukankan      html  css  js  c++  java

  • 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.             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.             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.             400px;
    47.             height: 100px;
    48.             overflow: hidden;
    49.             background: #000;
    50.         }
    51.         
    52.         #container
    53.         {
    54.             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>
    复制代码
    在线演示：

    如果您不想当成插件来用，里面的代码也可以单独扒出来(麦考林首页就是这么用的)
  • 相关阅读:
    r_action
    微内核 客户服务器模式 分布式
    机制与策略分离
    自顶向下设计
    swap
    专人写接口+模型，专人写业务逻辑---interface_model -- business logical
    14days laravel
    t
    不用print调试 xdebug ubuntu phpstorm 远程断点调试
    peewee sqlalchemy
  • 原文地址：https://www.cnblogs.com/luowei/p/2722738.html
Copyright © 2011-2022 走看看