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


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

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

    A:标头导入文件:

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

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

    B:页面核心实现代码

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

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

     1 <script type="text/javascript"> 
     2             /* <![CDATA[ */
     3             function startTPNiceSlideShow() {
     4                 var TPNiceSlideShow = new TPSlideShowClass($('TPNiceSlideShow'), {
     5                     timed: true,  //自动播放
     6                     showInfopane: true//显示简要
     7                     showMenu: true,  //菜单是有效
     8                     embedLinks: true//嵌入链接
     9                     fadeDuration: 500//渐褪特效延时
    10                     readMore: true// 显示更多按键
    11                     readMoreText: 'Read More'//更多链接文字
    12                     showTitle: true//显示标题
    13                     titleLink: true//标题链接
    14                     showDescription: true//显示描述
    15             
    16                     scrollBar: true//滚动条有效
    17                     itemCount: 10,  //项目总数,影响滚动的定位
    18                     scrollBarContent:    $('TPNiceSlideShowMenuWrp'),  //滚动内容ID
    19                     scrollBarArea: $('tpniceslideshow_scrollbar'), //滚动条区域
    20                     scrollBarHandle: $('tpniceslideshow_handle'),  //滚动条按钮
    21             
    22                     delay: 3000 //间隔时间
    23                 });
    24             }
    25             window.onDomReady(startTPNiceSlideShow);
    26             
    27             /* ]]> */
    28 </script>
    29 
  • 相关阅读:
    杭电ACM1.2.6 Decimal System
    杭电ACM1.2.7 GPA
    taro hook 倒计时setTimeout版
    taro hook 倒计时setInterval版
    Vuecli3内存溢出解决方案记录
    哈希
    hashmap和hashtable区别
    HashMap[转]
    JAVA中List、Map、Set
    C++和MATLAB混合编程DLL篇[转]
  • 原文地址:https://www.cnblogs.com/chenkai/p/1617653.html
Copyright © 2020-2023  润新知