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.                 <a 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.                 <a 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.                 <a href="#" title="open link" class="open"></a>  
  30.                 <img src="Images/11193000.jpg" lass="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.                 <a 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.                 <a 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.                 <a 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.                 <a 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.                 <a 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.                 <a 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.                 <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                 <a 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.                 <a 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.                 <a 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.                 <a 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.                 <a 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.                 <a 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.                 <a 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.                 <a 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.                 <a 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.                 <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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.                         <a 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> 

 

你可能感兴趣的:(jquery,wp7,制作,休闲,广告栏)