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

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

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

A:标头导入文件:

<headrunat="server">
<title>用Jquery制作一个SilderShow广告演示栏</title>
<metaContent="利用Ajax Jquery制作一个Sildershow广告演示栏"></meta>
<metaContent="Author:chenkai Date:2009年12月5日17:20:00"></meta>
<scripttype="text/javascript"src="Scripts/jquery-1.3.2.js"></script>
<scripttype="text/javascript"src="Scripts/jquery-1.3.2.min.js"></script>
<scripttype="text/javascript"src="Scripts/mootools.js"></script>
<scripttype="text/javascript"src="Scripts/tpniceslideshow.js"></script>
<linkrel="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 quiinea 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 quiinea 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>
FromOprahtoSpringsteen</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">FromOprahtoSprings ...</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 quiinea 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 quiinea 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>
FromOprahtoSpringsteen</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">FromOprahtoSprings ...</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[ */
functionstartTPNiceSlideShow() {
varTPNiceSlideShow =newTPSlideShowClass($('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版本)相关推荐

Bootstrap JQuery 制作一个登录页面
使用Bootstrap和 JQuery 制作一个简单登录页面: 链接:https://pan.baidu.com/s/1wJyL1rdVST0cVPfcbuIQlw 提取码:6666 1. 实现图片的 ...
jquery制作一个简单的日历
jquery是用的是2.0版本. 1.html代码 <!DOCTYPE html>  <html> <!--起始标 ...
转载：JQuery制作的选项卡改进版
JQuery制作的选项卡改进版记得去年刚开始在博客园写日志第一篇文章就是关于选项卡的,题目叫<JQuery制作的选项卡,重点体现在JS与HTML的分离>.最近做项目的时候,再回头看这段代 ...
使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
Principle for Mac：让你五分钟即可制作出一个具有完整交互动画的原型
Principle for Mac这款交互设计工具让你五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者 Gif 分享到 Dribbble.twitter 等社交平台. 无论您设 ...
jQuery制作动态酷效果总结
jQuery是一个优秀的JavaScript框架,可以很好的解决不同浏览器兼容的问题,尤其是在ASP.NET MVC下,它的作用更加的凸显. jQuery在制作动态酷效果的时候有很强的优势,以下是笔者 ...
使用jquery制作计算器_如何使用jQuery对计算器进行编程
使用jquery制作计算器 Previously, I showed you how to use CSS border-radius property to create the following ...
用css3和jQuery制作精美的表单
用css3和jQuery制作一个简单的精美表单 html代码如下: <span class="title">Mask Your Input Forms and Make ...
制作第一个HTML网页,2制作第一个HTML网页.ppt
2制作第一个HTML网页 * 主讲:冯树茂深圳市龙城初级中学HTML语法是由标记(Tags)和属性(Attributes)所组成. 标记(Tag):HTML标记通常可以分成两种,第1种是用来识别网页 ...

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

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

最新文章

热门文章