Jquery制作另一个炫丽广告栏-(VS2010版本)-阿里云开发者社区

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

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

A:标头导入文件:


 
 

  
  <head runat="server"> 

  
      <title>用Jquery制作一个SilderShow广告演示栏</title> 

  
      <meta Content="利用Ajax Jquery制作一个Sildershow广告演示栏"></meta> 

  
      <meta Content="Author:chenkai Date:2009年12月5日17:20:00"></meta> 

  
        

  
      <!--导入Jquery核心文件--> 

  
      <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script> 

  
      <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script> 

  
        

  
      <!--导入Silder制作JS Sildershow在js定义实现类 多个参数可以自定义参数有详解 请看源文件--> 

  
      <script type="text/javascript" src="Scripts/mootools.js"></script> 

  
      <script type="text/javascript" src="Scripts/tpniceslideshow.js"></script> 

  
        

  
      <!--导入自定义样式CSS 对Sildershow样式定义 可以修改--> 

  
      <link rel="stylesheet" type="text/css" href="CSS/tpniceslideshow.css" /> 

  
   

  
  </head>

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

B:页面核心实现代码


 
 

  
  <!--文件核心代码定义是相对应的 演示图片数量10张 代码偏多 其中一个<div class="imageElement"> 对应一个<div class="TPNiceSlideShowMenuContent">  

  
  -->  

  
   

  
  <form id="form1" runat="server">  

  
        <div class="TPNSSwrapper">  

  
          <div id="TPNiceSlideShow">  

  
                <div class="imageElement">  

  
                  <h3>  

  
                      The Celebrities</h3>  

  
                  <p>  

  
                      Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>  

  
                  <a href="#" title="open link" class="open"></a><img src="Images/11193000.jpg" class="full" alt="The Celebrities" /></div>  

  
                      <div class="imageElement">  

  
                  <h3>  

  
                      Eaque ipsa quae  

  
                  </h3>  

  
                  <p>  

  
                      illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  

  
                      Nemo enim ipsam voluptatem quia voluptas  

  
                  </p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      The Celebrities</h3>  

  
                  <p>  

  
                      Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/11193000.jpg" lass="full" alt="The Celebrities" />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      Bolt - Box Office</h3>  

  
                  <p>  

  
                      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque  

  
                      laudantium, totam rem aperiam</p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/12629000.jpg" class="full" alt="Bolt - Box Office" />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      Voluptatem sequi nesciunt</h3>  

  
                  <p>  

  
                      Neque porro quisquam est, qui dolorem ipsum quia dolor  

  
                  </p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/17018000.jpg" class="full" alt="Voluptatem sequi nesciunt" />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      From Oprah to Springsteen</h3>  

  
                  <p>  

  
                      Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam  

  
                      quaerat voluptatem. Ut enim a</p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/37400000.jpg" class="full" alt="From Oprah to Springsteen" />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      Eaque ipsa quae  

  
                  </h3>  

  
                  <p>  

  
                      illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  

  
                      Nemo enim ipsam voluptatem quia voluptas  

  
                  </p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      Red Carpet</h3>  

  
                  <p>  

  
                      Architecto beatae vitae dicta beatae vitae dicta</p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/22176000.jpg" class="full" alt="Red Carpet" />  

  
              </div>  

  
                      <div class="imageElement">  

  
                  <h3>  

  
                      Eaque ipsa quae  

  
                  </h3>  

  
                  <p>  

  
                      illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  

  
                      Nemo enim ipsam voluptatem quia voluptas  

  
                  </p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      2009 Grammy Nomination Concert</h3>  

  
                  <p>  

  
                      Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid  

  
                      ex ea commodi consequatur?  

  
                  </p>  

  
                  <a href="#" title="open link" 

  
                      class="open"></a>  

  
                  <img src="Images/23785000.jpg" class="full" alt="2009 Grammy Nomination Concert" />  

  
              </div>  

  
          </div>  

  
          <div id="TPNiceSlideShowMenuWrp">  

  
              <div id="TPNiceSlideShowMenu">  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/11193001.jpg" alt="The Celebrities" />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />  

  
                              <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/17018001.jpg" alt="The Celebrities" />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />  

  
                              <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/12629001.jpg" alt="Bolt - New Box Office" />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Bolt - New Box Office</span><br />  

  
                              <span class="tpnssmenu_desc">Sed ut perspiciatis unde omnis iste natus </span>  

  
                          </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/17018001.jpg" alt="Voluptatem sequi nesciunt" />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Voluptatem sequi nesciunt</span><br />  

  
                              <span class="tpnssmenu_desc">Neque porro quisquam est, qui dolorem </span></a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />  

  
                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/37400001.jpg" alt="From Oprah to Springs ..." />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">From Oprah to Springs ...</span><br />  

  
                              <span class="tpnssmenu_desc">Sed quia non numquam eius modi tempora incidunt ut  

  
                              </span></a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/69460001.jpg" alt="Eaque ipsa quae " />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Eaque ipsa quae </span>  

  
                              <br />  

  
                              <span class="tpnssmenu_desc">Eaque ipsa quae ab illo </span></a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />  

  
                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/22176001.jpg" alt="Red Carpet" />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Red Carpet</span><br />  

  
                              <span class="tpnssmenu_desc">Architecto beatae vitae dicta</span> </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />  

  
                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>  

  
                      </p>  

  
                  </div>  

  
                    

  
              </div>  

  
          </div>  

  
          <div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">  

  
              <div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">  

  
              </div>  

  
          </div>  

  
          <div style="clear: both;">  

  
          </div>  

  
      </div>      

  
  <form id="form1" runat="server">  

  
        <div class="TPNSSwrapper">  

  
          <div id="TPNiceSlideShow">  

  
                <div class="imageElement">  

  
                  <h3>  

  
                      The Celebrities</h3>  

  
                  <p>  

  
                      Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>  

  
                  <a href="#" title="open link" class="open"></a><img src="Images/11193000.jpg" class="full" alt="The Celebrities" /></div>  

  
                      <div class="imageElement">  

  
                  <h3>  

  
                      Eaque ipsa quae  

  
                  </h3>  

  
                  <p>  

  
                      illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  

  
                      Nemo enim ipsam voluptatem quia voluptas  

  
                  </p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      The Celebrities</h3>  

  
                  <p>  

  
                      Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/11193000.jpg" class="full" alt="The Celebrities" />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      Bolt - Box Office</h3>  

  
                  <p>  

  
                      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque  

  
                      laudantium, totam rem aperiam</p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/12629000.jpg" class="full" alt="Bolt - Box Office" />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      Voluptatem sequi nesciunt</h3>  

  
                  <p>  

  
                      Neque porro quisquam est, qui dolorem ipsum quia dolor  

  
                  </p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/17018000.jpg" class="full" alt="Voluptatem sequi nesciunt" />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      From Oprah to Springsteen</h3>  

  
                  <p>  

  
                      Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam  

  
                      quaerat voluptatem. Ut enim a</p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/37400000.jpg" class="full" alt="From Oprah to Springsteen" />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      Eaque ipsa quae  

  
                  </h3>  

  
                  <p>  

  
                      illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  

  
                      Nemo enim ipsam voluptatem quia voluptas  

  
                  </p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      Red Carpet</h3>  

  
                  <p>  

  
                      Architecto beatae vitae dicta beatae vitae dicta</p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/22176000.jpg" class="full" alt="Red Carpet" />  

  
              </div>  

  
                      <div class="imageElement">  

  
                  <h3>  

  
                      Eaque ipsa quae  

  
                  </h3>  

  
                  <p>  

  
                      illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  

  
                      Nemo enim ipsam voluptatem quia voluptas  

  
                  </p>  

  
                  <a href="#" title="open link" class="open"></a>  

  
                  <img src="Images/69460000.jpg" class="full" alt="Eaque ipsa quae " />  

  
              </div>  

  
              <div class="imageElement">  

  
                  <h3>  

  
                      2009 Grammy Nomination Concert</h3>  

  
                  <p>  

  
                      Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid  

  
                      ex ea commodi consequatur?  

  
                  </p>  

  
                  <a href="#" title="open link" 

  
                      class="open"></a>  

  
                  <img src="Images/23785000.jpg" class="full" alt="2009 Grammy Nomination Concert" />  

  
              </div>  

  
          </div>  

  
          <div id="TPNiceSlideShowMenuWrp">  

  
              <div id="TPNiceSlideShowMenu">  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/11193001.jpg" alt="The Celebrities" />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />  

  
                              <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/17018001.jpg" alt="The Celebrities" />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />  

  
                              <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/12629001.jpg" alt="Bolt - New Box Office" />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Bolt - New Box Office</span><br />  

  
                              <span class="tpnssmenu_desc">Sed ut perspiciatis unde omnis iste natus </span>  

  
                          </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/17018001.jpg" alt="Voluptatem sequi nesciunt" />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Voluptatem sequi nesciunt</span><br />  

  
                              <span class="tpnssmenu_desc">Neque porro quisquam est, qui dolorem </span></a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />  

  
                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/37400001.jpg" alt="From Oprah to Springs ..." />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">From Oprah to Springs ...</span><br />  

  
                              <span class="tpnssmenu_desc">Sed quia non numquam eius modi tempora incidunt ut  

  
                              </span></a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/69460001.jpg" alt="Eaque ipsa quae " />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Eaque ipsa quae </span>  

  
                              <br />  

  
                              <span class="tpnssmenu_desc">Eaque ipsa quae ab illo </span></a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />  

  
                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/22176001.jpg" alt="Red Carpet" />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">Red Carpet</span><br />  

  
                              <span class="tpnssmenu_desc">Architecto beatae vitae dicta</span> </a>  

  
                      </p>  

  
                  </div>  

  
                  <div class="TPNiceSlideShowMenuContent">  

  
                      <img src="Images/23785001.jpg" alt="2009 Grammy Nominat .." />  

  
                      <p>  

  
                          <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />  

  
                              <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>  

  
                      </p>  

  
                  </div>  

  
                    

  
              </div>  

  
          </div>  

  
          <div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">  

  
              <div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">  

  
              </div>  

  
          </div>  

  
          <div style="clear: both;">  

  
          </div>  

  
      </div>      

  
   

  
   </form>

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


 
 

  
  <script type="text/javascript">   

  
               /* <![CDATA[ */ 

  
               function startTPNiceSlideShow() {  

  
                   var TPNiceSlideShow = new TPSlideShowClass($('TPNiceSlideShow'), {  

  
                       timed: true,  //自动播放  

  
                       showInfopane: true, //显示简要  

  
                       showMenu: true,  //菜单是有效  

  
                       embedLinks: true, //嵌入链接  

  
                       fadeDuration: 500, //渐褪特效延时  

  
                       readMore: true, // 显示更多按键  

  
                       readMoreText: 'Read More', //更多链接文字  

  
                       showTitle: true, //显示标题  

  
                       titleLink: true, //标题链接  

  
                       showDescription: true, //显示描述  

  
                 

  
                       scrollBar: true, //滚动条有效  

  
                       itemCount: 10,  //项目总数，影响滚动的定位  

  
                       scrollBarContent:    $('TPNiceSlideShowMenuWrp'),  //滚动内容ID  

  
                       scrollBarArea: $('tpniceslideshow_scrollbar'), //滚动条区域  

  
                       scrollBarHandle: $('tpniceslideshow_handle'),  //滚动条按钮  

  
                 

  
                       delay: 3000 //间隔时间  

  
                   });  

  
               }  

  
               window.onDomReady(startTPNiceSlideShow);  

  
                 

  
               /* ]]> */ 

  
   </script>

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

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件