在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>