产品解决方案文档与社区权益中心定价云市场合作伙伴支持与服务了解阿里云
联系我们
4008013260
售前咨询售后服务
其他服务
我要建议我要投诉
备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

Jquery制作另一个炫丽广告栏-(VS2010版本)

2017-11-13 884
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

在templateplazza.net上看到这个SilderShow,比上一个制作还是精美许多,右边文字栏美化较到位,另外一个是包含信息量是上一个2倍多,横幅滚动，上一个我貌似加了超过四个信息量，里面样式就发生变化并且没有出现滚动条，应该样式顶死了，定位4张图信息量,今天来制作另外一个:先做一个简单截图 看看效果:

其中样式居多,文件中这个Sildershow单独定义在(tpniceslideshow.js)JS文件中,Js呈现时类,多个参数都可以自定义属性,方便在外调用.相对应定义Sildershow样式在(tpniceslideshow.css)CSS文件中,具体实现步骤如下:

A:标头导入文件:

 

     
 
  1. <head runat="server"> 
    2.  
 
  2.      <title>用Jquery制作一个SilderShow广告演示栏</title>  
    3.  
 
  3.      <meta Content="利用Ajax Jquery制作一个Sildershow广告演示栏"></meta>  
    4.  
 
  4.      <meta Content="Author:chenkai Date:2009年12月5日17:20:00"></meta>  
    5.  
 
  5.       
    6.  
 
  6.      <!--导入Jquery核心文件-->  
    7.  
 
  7.      <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>  
    8.  
 
  8.      <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>  
    9.  
 
  9.       
    10.  
 
  10.      <!--导入Silder制作JS Sildershow在js定义实现类 多个参数可以自定义参数有详解 请看源文件-->  
    11.  
 
  11.      <script type="text/javascript" src="Scripts/mootools.js"></script>  
    12.  
 
  12.      <script type="text/javascript" src="Scripts/tpniceslideshow.js"></script>  
    13.  
 
  13.       
    14.  
 
  14.      <!--导入自定义样式CSS 对Sildershow样式定义 可以修改-->  
    15.  
 
  15.      <link rel="stylesheet" type="text/css" href="CSS/tpniceslideshow.css" />  
    16.  
 
  16.  
    17.  
 
  17.  </head>  
    18.  

 

其中mootools.js是一个常用Ajax  Library,导入如上文件后来看看具体页面核心代码:
 

B:页面核心实现代码
 

 

     
 
  1. <!--文件核心代码定义是相对应的 演示图片数量10张 代码偏多 其中一个<div class="imageElement"> 对应一个<div class="TPNiceSlideShowMenuContent">  
    2.  
 
  2.  -->   
    3.  
 
  3.  
    4.  
 
  4.  <form id="form1" runat="server">   
    5.  
 
  5.        <div class="TPNSSwrapper">   
    6.  
 
  6.          <div id="TPNiceSlideShow">   
    7.  
 
  7.                <div class="imageElement">   
    8.  
 
  8.                 <h3>  
    9.  
 
  9.                     The Celebrities</h3>  
    10.  
 
  10.                 <p>  
    11.  
 
  11.                      Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>   
    12.  
 
  12.                  <a href="#" title="open link" class="open"></a><img src="Images/11193000.jpg" class="full" alt="The Celebrities" /></div>   
    13.  
 
  13.                      <div class="imageElement">   
    14.  
 
  14.                 <h3>  
    15.  
 
  15.                     Eaque ipsa quae  
    16.  
 
  16.                 </h3>  
    17.  
 
  17.                 <p>  
    18.  
 
  18.                     illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  
    19.  
 
  19.                     Nemo enim ipsam voluptatem quia voluptas  
    20.  
 
  20.                 </p>  
    21.  
 
  21.                  <a href="#" title="open link" class="open"></a>   
    22.  
 
  22.                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />   
    23.  
 
  23.             </div>  
    24.  
 
  24.              <div class="imageElement">   
    25.  
 
  25.                 <h3>  
    26.  
 
  26.                     The Celebrities</h3>  
    27.  
 
  27.                 <p>  
    28.  
 
  28.                      Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>   
    29.  
 
  29.                  <a href="#" title="open link" class="open"></a>   
    30.  
 
  30.                  <img src="Images/11193000.jpg" lass="full" alt="The Celebrities" />   
    31.  
 
  31.             </div>  
    32.  
 
  32.              <div class="imageElement">   
    33.  
 
  33.                 <h3>  
    34.  
 
  34.                     Bolt - Box Office</h3>  
    35.  
 
  35.                 <p>  
    36.  
 
  36.                     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque  
    37.  
 
  37.                     laudantium, totam rem aperiam</p>  
    38.  
 
  38.                  <a href="#" title="open link" class="open"></a>   
    39.  
 
  39.                  <img src="Images/12629000.jpg" class="full" alt="Bolt - Box Office" />   
    40.  
 
  40.             </div>  
    41.  
 
  41.              <div class="imageElement">   
    42.  
 
  42.                 <h3>  
    43.  
 
  43.                     Voluptatem sequi nesciunt</h3>  
    44.  
 
  44.                 <p>  
    45.  
 
  45.                     Neque porro quisquam est, qui dolorem ipsum quia dolor  
    46.  
 
  46.                 </p>  
    47.  
 
  47.                  <a href="#" title="open link" class="open"></a>   
    48.  
 
  48.                  <img src="Images/17018000.jpg" class="full" alt="Voluptatem sequi nesciunt" />   
    49.  
 
  49.             </div>  
    50.  
 
  50.              <div class="imageElement">   
    51.  
 
  51.                 <h3>  
    52.  
 
  52.                      From Oprah to Springsteen</h3>   
    53.  
 
  53.                 <p>  
    54.  
 
  54.                     Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam  
    55.  
 
  55.                     quaerat voluptatem. Ut enim a</p>  
    56.  
 
  56.                  <a href="#" title="open link" class="open"></a>   
    57.  
 
  57.                  <img src="Images/37400000.jpg" class="full" alt="From Oprah to Springsteen" />   
    58.  
 
  58.             </div>  
    59.  
 
  59.              <div class="imageElement">   
    60.  
 
  60.                 <h3>  
    61.  
 
  61.                     Eaque ipsa quae  
    62.  
 
  62.                 </h3>  
    63.  
 
  63.                 <p>  
    64.  
 
  64.                     illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  
    65.  
 
  65.                     Nemo enim ipsam voluptatem quia voluptas  
    66.  
 
  66.                 </p>  
    67.  
 
  67.                  <a href="#" title="open link" class="open"></a>   
    68.  
 
  68.                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />   
    69.  
 
  69.             </div>  
    70.  
 
  70.              <div class="imageElement">   
    71.  
 
  71.                 <h3>  
    72.  
 
  72.                     Red Carpet</h3>  
    73.  
 
  73.                 <p>  
    74.  
 
  74.                     Architecto beatae vitae dicta beatae vitae dicta</p>  
    75.  
 
  75.                  <a href="#" title="open link" class="open"></a>   
    76.  
 
  76.                  <img src="Images/22176000.jpg" class="full" alt="Red Carpet" />   
    77.  
 
  77.             </div>  
    78.  
 
  78.                      <div class="imageElement">   
    79.  
 
  79.                 <h3>  
    80.  
 
  80.                     Eaque ipsa quae  
    81.  
 
  81.                 </h3>  
    82.  
 
  82.                 <p>  
    83.  
 
  83.                     illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  
    84.  
 
  84.                     Nemo enim ipsam voluptatem quia voluptas  
    85.  
 
  85.                 </p>  
    86.  
 
  86.                  <a href="#" title="open link" class="open"></a>   
    87.  
 
  87.                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />   
    88.  
 
  88.             </div>  
    89.  
 
  89.              <div class="imageElement">   
    90.  
 
  90.                 <h3>  
    91.  
 
  91.                     2009 Grammy Nomination Concert</h3>  
    92.  
 
  92.                 <p>  
    93.  
 
  93.                     Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid  
    94.  
 
  94.                     ex ea commodi consequatur?  
    95.  
 
  95.                 </p>  
    96.  
 
  96.                  <a href="#" title="open link"  
    97.  
 
  97.                      class="open"></a>   
    98.  
 
  98.                  <img src="Images/23785000.jpg" class="full" alt="2009 Grammy Nomination Concert" />   
    99.  
 
  99.             </div>  
    100.  
 
  100.         </div>  
    101.  
 
  101.          <div id="TPNiceSlideShowMenuWrp">   
    102.  
 
  102.              <div id="TPNiceSlideShowMenu">   
    103.  
 
  103.                  <div class="TPNiceSlideShowMenuContent">   
    104.  
 
  104.                      <img src="Images/11193001.jpg" alt="The Celebrities" />   
    105.  
 
  105.                     <p>  
    106.  
 
  106.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />   
    107.  
 
  107.                              <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>   
    108.  
 
  108.                     </p>  
    109.  
 
  109.                 </div>  
    110.  
 
  110.                  <div class="TPNiceSlideShowMenuContent">   
    111.  
 
  111.                      <img src="Images/17018001.jpg" alt="The Celebrities" />   
    112.  
 
  112.                     <p>  
    113.  
 
  113.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />   
    114.  
 
  114.                              <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>   
    115.  
 
  115.                     </p>  
    116.  
 
  116.                 </div>  
    117.  
 
  117.                  <div class="TPNiceSlideShowMenuContent">   
    118.  
 
  118.                      <img src="Images/12629001.jpg" alt="Bolt - New Box Office" />   
    119.  
 
  119.                     <p>  
    120.  
 
  120.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Bolt - New Box Office</span><br />   
    121.  
 
  121.                              <span class="tpnssmenu_desc">Sed ut perspiciatis unde omnis iste natus </span>   
    122.  
 
  122.                         </a>  
    123.  
 
  123.                     </p>  
    124.  
 
  124.                 </div>  
    125.  
 
  125.                  <div class="TPNiceSlideShowMenuContent">   
    126.  
 
  126.                      <img src="Images/17018001.jpg" alt="Voluptatem sequi nesciunt" />   
    127.  
 
  127.                     <p>  
    128.  
 
  128.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Voluptatem sequi nesciunt</span><br />   
    129.  
 
  129.                              <span class="tpnssmenu_desc">Neque porro quisquam est, qui dolorem </span></a>   
    130.  
 
  130.                     </p>  
    131.  
 
  131.                 </div>  
    132.  
 
  132.                  <div class="TPNiceSlideShowMenuContent">   
    133.  
 
  133.                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />   
    134.  
 
  134.                     <p>  
    135.  
 
  135.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />   
    136.  
 
  136.                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>   
    137.  
 
  137.                     </p>  
    138.  
 
  138.                 </div>  
    139.  
 
  139.                  <div class="TPNiceSlideShowMenuContent">   
    140.  
 
  140.                      <img src="Images/37400001.jpg" alt="From Oprah to Springs ..." />   
    141.  
 
  141.                     <p>  
    142.  
 
  142.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">From Oprah to Springs ...</span><br />   
    143.  
 
  143.                              <span class="tpnssmenu_desc">Sed quia non numquam eius modi tempora incidunt ut   
    144.  
 
  144.                             </span></a>  
    145.  
 
  145.                     </p>  
    146.  
 
  146.                 </div>  
    147.  
 
  147.                  <div class="TPNiceSlideShowMenuContent">   
    148.  
 
  148.                      <img src="Images/69460001.jpg" alt="Eaque ipsa quae " />   
    149.  
 
  149.                     <p>  
    150.  
 
  150.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Eaque ipsa quae </span>   
    151.  
 
  151.                             <br />  
    152.  
 
  152.                              <span class="tpnssmenu_desc">Eaque ipsa quae ab illo </span></a>   
    153.  
 
  153.                     </p>  
    154.  
 
  154.                 </div>  
    155.  
 
  155.                  <div class="TPNiceSlideShowMenuContent">   
    156.  
 
  156.                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />   
    157.  
 
  157.                     <p>  
    158.  
 
  158.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />   
    159.  
 
  159.                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>   
    160.  
 
  160.                     </p>  
    161.  
 
  161.                 </div>  
    162.  
 
  162.                  <div class="TPNiceSlideShowMenuContent">   
    163.  
 
  163.                      <img src="Images/22176001.jpg" alt="Red Carpet" />   
    164.  
 
  164.                     <p>  
    165.  
 
  165.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Red Carpet</span><br />   
    166.  
 
  166.                              <span class="tpnssmenu_desc">Architecto beatae vitae dicta</span> </a>   
    167.  
 
  167.                     </p>  
    168.  
 
  168.                 </div>  
    169.  
 
  169.                  <div class="TPNiceSlideShowMenuContent">   
    170.  
 
  170.                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />   
    171.  
 
  171.                     <p>  
    172.  
 
  172.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />   
    173.  
 
  173.                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>   
    174.  
 
  174.                     </p>  
    175.  
 
  175.                 </div>  
    176.  
 
  176.                   
    177.  
 
  177.             </div>  
    178.  
 
  178.         </div>  
    179.  
 
  179.          <div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">   
    180.  
 
  180.              <div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">   
    181.  
 
  181.             </div>  
    182.  
 
  182.         </div>  
    183.  
 
  183.          <div style="clear: both;">   
    184.  
 
  184.         </div>  
    185.  
 
  185.     </div>      
    186.  
 
  186.  <form id="form1" runat="server">   
    187.  
 
  187.        <div class="TPNSSwrapper">   
    188.  
 
  188.          <div id="TPNiceSlideShow">   
    189.  
 
  189.                <div class="imageElement">   
    190.  
 
  190.                 <h3>  
    191.  
 
  191.                     The Celebrities</h3>  
    192.  
 
  192.                 <p>  
    193.  
 
  193.                      Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>   
    194.  
 
  194.                  <a href="#" title="open link" class="open"></a><img src="Images/11193000.jpg" class="full" alt="The Celebrities" /></div>   
    195.  
 
  195.                      <div class="imageElement">   
    196.  
 
  196.                 <h3>  
    197.  
 
  197.                     Eaque ipsa quae  
    198.  
 
  198.                 </h3>  
    199.  
 
  199.                 <p>  
    200.  
 
  200.                     illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  
    201.  
 
  201.                     Nemo enim ipsam voluptatem quia voluptas  
    202.  
 
  202.                 </p>  
    203.  
 
  203.                  <a href="#" title="open link" class="open"></a>   
    204.  
 
  204.                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />   
    205.  
 
  205.             </div>  
    206.  
 
  206.              <div class="imageElement">   
    207.  
 
  207.                 <h3>  
    208.  
 
  208.                     The Celebrities</h3>  
    209.  
 
  209.                 <p>  
    210.  
 
  210.                      Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>   
    211.  
 
  211.                  <a href="#" title="open link" class="open"></a>   
    212.  
 
  212.                  <img src="Images/11193000.jpg" class="full" alt="The Celebrities" />   
    213.  
 
  213.             </div>  
    214.  
 
  214.              <div class="imageElement">   
    215.  
 
  215.                 <h3>  
    216.  
 
  216.                     Bolt - Box Office</h3>  
    217.  
 
  217.                 <p>  
    218.  
 
  218.                     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque  
    219.  
 
  219.                     laudantium, totam rem aperiam</p>  
    220.  
 
  220.                  <a href="#" title="open link" class="open"></a>   
    221.  
 
  221.                  <img src="Images/12629000.jpg" class="full" alt="Bolt - Box Office" />   
    222.  
 
  222.             </div>  
    223.  
 
  223.              <div class="imageElement">   
    224.  
 
  224.                 <h3>  
    225.  
 
  225.                     Voluptatem sequi nesciunt</h3>  
    226.  
 
  226.                 <p>  
    227.  
 
  227.                     Neque porro quisquam est, qui dolorem ipsum quia dolor  
    228.  
 
  228.                 </p>  
    229.  
 
  229.                  <a href="#" title="open link" class="open"></a>   
    230.  
 
  230.                  <img src="Images/17018000.jpg" class="full" alt="Voluptatem sequi nesciunt" />   
    231.  
 
  231.             </div>  
    232.  
 
  232.              <div class="imageElement">   
    233.  
 
  233.                 <h3>  
    234.  
 
  234.                      From Oprah to Springsteen</h3>   
    235.  
 
  235.                 <p>  
    236.  
 
  236.                     Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam  
    237.  
 
  237.                     quaerat voluptatem. Ut enim a</p>  
    238.  
 
  238.                  <a href="#" title="open link" class="open"></a>   
    239.  
 
  239.                  <img src="Images/37400000.jpg" class="full" alt="From Oprah to Springsteen" />   
    240.  
 
  240.             </div>  
    241.  
 
  241.              <div class="imageElement">   
    242.  
 
  242.                 <h3>  
    243.  
 
  243.                     Eaque ipsa quae  
    244.  
 
  244.                 </h3>  
    245.  
 
  245.                 <p>  
    246.  
 
  246.                     illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  
    247.  
 
  247.                     Nemo enim ipsam voluptatem quia voluptas  
    248.  
 
  248.                 </p>  
    249.  
 
  249.                  <a href="#" title="open link" class="open"></a>   
    250.  
 
  250.                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />   
    251.  
 
  251.             </div>  
    252.  
 
  252.              <div class="imageElement">   
    253.  
 
  253.                 <h3>  
    254.  
 
  254.                     Red Carpet</h3>  
    255.  
 
  255.                 <p>  
    256.  
 
  256.                     Architecto beatae vitae dicta beatae vitae dicta</p>  
    257.  
 
  257.                  <a href="#" title="open link" class="open"></a>   
    258.  
 
  258.                  <img src="Images/22176000.jpg" class="full" alt="Red Carpet" />   
    259.  
 
  259.             </div>  
    260.  
 
  260.                      <div class="imageElement">   
    261.  
 
  261.                 <h3>  
    262.  
 
  262.                     Eaque ipsa quae  
    263.  
 
  263.                 </h3>  
    264.  
 
  264.                 <p>  
    265.  
 
  265.                     illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  
    266.  
 
  266.                     Nemo enim ipsam voluptatem quia voluptas  
    267.  
 
  267.                 </p>  
    268.  
 
  268.                  <a href="#" title="open link" class="open"></a>   
    269.  
 
  269.                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />   
    270.  
 
  270.             </div>  
    271.  
 
  271.              <div class="imageElement">   
    272.  
 
  272.                 <h3>  
    273.  
 
  273.                     2009 Grammy Nomination Concert</h3>  
    274.  
 
  274.                 <p>  
    275.  
 
  275.                     Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid  
    276.  
 
  276.                     ex ea commodi consequatur?  
    277.  
 
  277.                 </p>  
    278.  
 
  278.                  <a href="#" title="open link"  
    279.  
 
  279.                      class="open"></a>   
    280.  
 
  280.                  <img src="Images/23785000.jpg" class="full" alt="2009 Grammy Nomination Concert" />   
    281.  
 
  281.             </div>  
    282.  
 
  282.         </div>  
    283.  
 
  283.          <div id="TPNiceSlideShowMenuWrp">   
    284.  
 
  284.              <div id="TPNiceSlideShowMenu">   
    285.  
 
  285.                  <div class="TPNiceSlideShowMenuContent">   
    286.  
 
  286.                      <img src="Images/11193001.jpg" alt="The Celebrities" />   
    287.  
 
  287.                     <p>  
    288.  
 
  288.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />   
    289.  
 
  289.                              <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>   
    290.  
 
  290.                     </p>  
    291.  
 
  291.                 </div>  
    292.  
 
  292.                  <div class="TPNiceSlideShowMenuContent">   
    293.  
 
  293.                      <img src="Images/17018001.jpg" alt="The Celebrities" />   
    294.  
 
  294.                     <p>  
    295.  
 
  295.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />   
    296.  
 
  296.                              <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>   
    297.  
 
  297.                     </p>  
    298.  
 
  298.                 </div>  
    299.  
 
  299.                  <div class="TPNiceSlideShowMenuContent">   
    300.  
 
  300.                      <img src="Images/12629001.jpg" alt="Bolt - New Box Office" />   
    301.  
 
  301.                     <p>  
    302.  
 
  302.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Bolt - New Box Office</span><br />   
    303.  
 
  303.                              <span class="tpnssmenu_desc">Sed ut perspiciatis unde omnis iste natus </span>   
    304.  
 
  304.                         </a>  
    305.  
 
  305.                     </p>  
    306.  
 
  306.                 </div>  
    307.  
 
  307.                  <div class="TPNiceSlideShowMenuContent">   
    308.  
 
  308.                      <img src="Images/17018001.jpg" alt="Voluptatem sequi nesciunt" />   
    309.  
 
  309.                     <p>  
    310.  
 
  310.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Voluptatem sequi nesciunt</span><br />   
    311.  
 
  311.                              <span class="tpnssmenu_desc">Neque porro quisquam est, qui dolorem </span></a>   
    312.  
 
  312.                     </p>  
    313.  
 
  313.                 </div>  
    314.  
 
  314.                  <div class="TPNiceSlideShowMenuContent">   
    315.  
 
  315.                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />   
    316.  
 
  316.                     <p>  
    317.  
 
  317.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />   
    318.  
 
  318.                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>   
    319.  
 
  319.                     </p>  
    320.  
 
  320.                 </div>  
    321.  
 
  321.                  <div class="TPNiceSlideShowMenuContent">   
    322.  
 
  322.                      <img src="Images/37400001.jpg" alt="From Oprah to Springs ..." />   
    323.  
 
  323.                     <p>  
    324.  
 
  324.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">From Oprah to Springs ...</span><br />   
    325.  
 
  325.                              <span class="tpnssmenu_desc">Sed quia non numquam eius modi tempora incidunt ut   
    326.  
 
  326.                             </span></a>  
    327.  
 
  327.                     </p>  
    328.  
 
  328.                 </div>  
    329.  
 
  329.                  <div class="TPNiceSlideShowMenuContent">   
    330.  
 
  330.                      <img src="Images/69460001.jpg" alt="Eaque ipsa quae " />   
    331.  
 
  331.                     <p>  
    332.  
 
  332.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Eaque ipsa quae </span>   
    333.  
 
  333.                             <br />  
    334.  
 
  334.                              <span class="tpnssmenu_desc">Eaque ipsa quae ab illo </span></a>   
    335.  
 
  335.                     </p>  
    336.  
 
  336.                 </div>  
    337.  
 
  337.                  <div class="TPNiceSlideShowMenuContent">   
    338.  
 
  338.                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />   
    339.  
 
  339.                     <p>  
    340.  
 
  340.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />   
    341.  
 
  341.                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>   
    342.  
 
  342.                     </p>  
    343.  
 
  343.                 </div>  
    344.  
 
  344.                  <div class="TPNiceSlideShowMenuContent">   
    345.  
 
  345.                      <img src="Images/22176001.jpg" alt="Red Carpet" />   
    346.  
 
  346.                     <p>  
    347.  
 
  347.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Red Carpet</span><br />   
    348.  
 
  348.                              <span class="tpnssmenu_desc">Architecto beatae vitae dicta</span> </a>   
    349.  
 
  349.                     </p>  
    350.  
 
  350.                 </div>  
    351.  
 
  351.                  <div class="TPNiceSlideShowMenuContent">   
    352.  
 
  352.                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />   
    353.  
 
  353.                     <p>  
    354.  
 
  354.                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />   
    355.  
 
  355.                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>   
    356.  
 
  356.                     </p>  
    357.  
 
  357.                 </div>  
    358.  
 
  358.                   
    359.  
 
  359.             </div>  
    360.  
 
  360.         </div>  
    361.  
 
  361.          <div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">   
    362.  
 
  362.              <div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">   
    363.  
 
  363.             </div>  
    364.  
 
  364.         </div>  
    365.  
 
  365.          <div style="clear: both;">   
    366.  
 
  366.         </div>  
    367.  
 
  367.     </div>      
    368.  
 
  368.  
    369.  
 
  369.  </form> 
    370.  

 

C：页面核心创建一个Sildershow核心代码
 

 

     
 
  1. <script type="text/javascript">   
    2.  
 
  2.               /* <![CDATA[ */  
    3.  
 
  3.               function startTPNiceSlideShow() {   
    4.  
 
  4.                   var TPNiceSlideShow = new TPSlideShowClass($('TPNiceSlideShow'), {   
    5.  
 
  5.                       timed: true,  //自动播放   
    6.  
 
  6.                       showInfopane: true, //显示简要   
    7.  
 
  7.                       showMenu: true,  //菜单是有效   
    8.  
 
  8.                       embedLinks: true, //嵌入链接   
    9.  
 
  9.                       fadeDuration: 500, //渐褪特效延时   
    10.  
 
  10.                       readMore: true, // 显示更多按键   
    11.  
 
  11.                       readMoreText: 'Read More', //更多链接文字   
    12.  
 
  12.                       showTitle: true, //显示标题   
    13.  
 
  13.                       titleLink: true, //标题链接   
    14.  
 
  14.                       showDescription: true, //显示描述   
    15.  
 
  15.                
    16.  
 
  16.                       scrollBar: true, //滚动条有效   
    17.  
 
  17.                       itemCount: 10,  //项目总数，影响滚动的定位   
    18.  
 
  18.                       scrollBarContent:    $('TPNiceSlideShowMenuWrp'),  //滚动内容ID   
    19.  
 
  19.                       scrollBarArea: $('tpniceslideshow_scrollbar'), //滚动条区域   
    20.  
 
  20.                       scrollBarHandle: $('tpniceslideshow_handle'),  //滚动条按钮   
    21.  
 
  21.                
    22.  
 
  22.                       delay: 3000 //间隔时间   
    23.  
 
  23.                  });  
    24.  
 
  24.              }  
    25.  
 
  25.              window.onDomReady(startTPNiceSlideShow);  
    26.  
 
  26.                
    27.  
 
  27.               /* ]]> */  
    28.  
 
  28.  </script> 
    29.  

 

 
 

本文转自chenkaiunion 51CTO博客，原文链接:http://blog.51cto.com/chenkai/765287
 


 



                        
                    

                    
                        

                            

    
文章标签：

    

        

            JavaScript
        

        

            前端开发
        

    



                            

    
关键词：

    

        

            jQuery版本
        

        

            jQuery制作
        

        

            jQuery vs2010版本
        

    



                            
                        

                        
                        
                    
                

                


                

                    

                        

                            
                                
                            
                            

                        

                        科技小能手
                        

                        

                    

                    

                        

                            

                            
目录

                        

                        

                    

                

                

                    

                


                

    
相关文章

    

        

            

                

                    你挚爱的强哥
                    
                

                |
                
4月前

                |
                

                    敏捷开发
                    JavaScript
                    前端开发
                

            

            

                

                    
                        ❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
                    
                    
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤

                    

                        

                            

                                你挚爱的强哥
                                
                            

                            38
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    你挚爱的强哥
                    
                

                |
                
4月前

                |
                

                    前端开发
                    JavaScript
                    API
                

            

            

                

                    
                        【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
                    
                    
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本

                    

                        

                            

                                你挚爱的强哥
                                
                            

                            25
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    zrblue
                    
                

                |
                
8月前

                |
                

                    JSON
                    缓存
                    前端开发
                

            

            

                

                    
                        JQuery版本的AJAX
                    
                    
AJAX写起来那么烦，还好JQuery那么可爱

                    

                        

                            

                                zrblue
                                
                            

                            62
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    No8g攻城狮
                    
                

                
                
                |
                

                    设计模式
                    JavaScript
                    前端开发
                

            

            

                

                    
                        【前端】JQuery框架 -- JQuery怎么使用和各个版本的区别、JQuery对象和JS对象区别、JQuery选择器
                    
                    
JQuery框架 -- JQuery怎么使用和各个版本的区别、JQuery对象和JS对象区别、JQuery选择器？
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨    是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

                    

                        

                            

                                No8g攻城狮
                                
                            

                            173
                            1
                            
                        

                    

                

                
            

        

        

            

                

                    JavaPub
                    
                

                
                
                |
                

                    前端开发
                    Java
                

            

            

                

                    
                        制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
                    
                    
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】,祝大家情人节快乐。

                    

                        

                            

                                JavaPub
                                
                            

                            129
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    开发工程师
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        关于 SAP UI5 里包含的 jQuery 版本
                    
                    
关于 SAP UI5 里包含的 jQuery 版本


                    

                        

                            

                                开发工程师
                                
                            

                            75
                            0
                            
                        

                    

                

                
                    关于 SAP UI5 里包含的 jQuery 版本
                
            

        

        

            

                

                    jerrywangsap
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        关于 SAP UI5 里包含的 jQuery 版本
                    
                    
sap-ui-core.js 是 bootstrap 部分的一部分，如下所示。 它包含一个 jQuery 文件的副本。 正在使用的 jQuery 版本可以通过命令 $.fn.jQuery 找到。

                    

                        

                            

                                jerrywangsap
                                
                            

                            97
                            0
                            
                        

                    

                

                
                    关于 SAP UI5 里包含的 jQuery 版本
                
            

        

        

            

                

                    码农小达人
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        关于 SAP UI5 里包含的 jQuery 版本
                    
                    
关于 SAP UI5 里包含的 jQuery 版本

                    

                        

                            

                                码农小达人
                                
                            

                            105
                            0
                            
                        

                    

                

                
                    关于 SAP UI5 里包含的 jQuery 版本
                
            

        

        

            

                

                    程序员大阳
                    
                

                
                
                |
                

                    JavaScript
                

            

            

                

                    
                        jQuery版本选择与下载配置
                    
                    
本文目录
1. 版本选择
2. jQuery1.x下载
3. jQuery配置使用

                    

                        

                            

                                程序员大阳
                                
                            

                            225
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    向善的灯
                    
                

                
                
                |
                

                    存储
                    缓存
                    前端开发
                

            

            

                

                    
                        【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）
                    
                    

								
					版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech					https://blog.csdn.net/m0_37981569/article/details/81156178				
								  ...

                    

                        

                            

                                向善的灯
                                
                            

                            1597
                            0
                            
                        

                    

                

                
            

        

    



            

            

                
                
                    
                    

    

        

            
热门文章

        

        

            
最新文章

        

    

    

        

            

                
  • 
                    
                        
    
                            
    1
    
                            
                            
    jQuery+CSS3自动轮播焦点图特效源码
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    2
    
                            
                            
    Jquery $.getJSON()设置同步
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    3
    
                            
                            
    Jquery真的不难~第八回 JS的闭包问题
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    4
    
                            
    不懂JQuery的孩子：自封装Ajax函数
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    5
    
                            
    读[JQuery实现的后台框架（动易+Slashdot Menu）]有感
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    6
    
                            
    jquery.lazyload.js实现图片懒加载
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    7
    
                            
    FancySelect – 更好用的 jQuery 下拉选择框插件
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    8
    
                            
    使用 jQuery Deferred 和 Promise 创建响应式应用程序
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    9
    
                            
    javascriptMVC教程 -- 14.FuncUnit实例：完成jquery焦点图插件的自动化功能测试
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    10
    
                            
    jQuery EasyUI API 中文文档 - 菜单按钮（MenuButton）
    
                            
    
                        
    
                        
                
    • 
            
    
            
    
                
            
    
        
    
        
    
            
    
                
  • 
                    
                        
    
                            
    1
    
                            
                            
    jQuery模态框弹窗提示代码
    
                            
    16
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    2
    
                            
                            
    使用JavaScript、jQuery和Bootstrap构建待办事项应用
    
                            
    11
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    3
    
                            
                            
    jQuery实现二级菜单
    
                            
    11
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    4
    
                            
    jQuery选择器 获取元素的十一种方式
    
                            
    15
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    5
    
                            
    jQuery幸运大转盘抽奖活动代码
    
                            
    32
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    6
    
                            
    JQuery样式操作、click事件以及索引值-选项卡应用示例
    
                            
    20
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    7
    
                            
    jquery+css实现Tab栏切换的代码实例
    
                            
    17
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    8
    
                            
    jquery实现二级导航下拉菜单效果实例
    
                            
    19
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    9
    
                            
    目前最流行的一些前端框架：React、Angular、Vue.js和jQuery
    
                            
    90
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    10
    
                            
    jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
    
                            
    17
    
                        
    
                        
                
    • 
            
    
            
    
                
            
    
        
    
    
    

    
                    
                    
    
    
    
        
    相关课程
    
        更多
    
    
    
    
        
  • 
                jQuery开发教程
            
    • 
        
  • 
                Vue.js完全自学手册图文教程
            
    • 
        
  • 
                Vue.js 入门与实战
            
    • 
        
  • 
                HTML5 新特性教程
            
    • 
        
  • 
                Node.js 入门教程文档
            
    • 
        
  • 
                JavaScript入门与实战
            
    • 
    
    

    
                    
    
    
    
        
    相关电子书
    
        更多
    
    
    
    
        
  • 
                23-Vue.js在前端...1506518547.pdf
            
    • 
        
  • 
                JS零基础入门教程（上册）
            
    • 
        
  • 
                现代Javascript高级教程
            
    • 
    
    

    
                    
    
    
    
        
    相关实验场景
    
        更多
    
    
    
    
        
  • 
            前端开发基础3：CSS3常见显示属性
        
    • 
        
  • 
            前端开发基础6：Node.js和LESS预编译工具
        
    • 
        
  • 
            HTML及前端框架
        
    • 
        
  • 
            CSS基础教程
        
    • 
    
    

    
                    
                    
                    
    
                        
    
    
    
        
    下一篇
    
    
    
    部署LAMP环境（Alibaba Cloud Linux 3）

    
                        
    
                    
    
                
            
    
            
        
    
    
    


  
  
  
    
    
    为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
    产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
    解决方案技术解决方案
    文档与社区文档开发者社区天池大赛培训与认证
    权益中心免费试用高校计划企业扶持计划推荐返现计划
    支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
    关注阿里云
    关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
    阿里云APP阿里云微信
    联系我们：4008013260
    法律声明Cookies政策廉正举报安全举报联系我们加入我们
    阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
    © 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
    浙公网安备 33010602009975号浙B2-20080101-4