一款很Nice的Slideshow

这是一款来自“templateplazza.net”的 slideshow .

基于mootools，看着效果不错就想抠下来与大家分享，我这里着重讲解一下它的使用方法，有不懂的地方就尽情的问吧。

首先呢要在头部引入 “mootools.js、tpniceslideshow.js、tpniceslideshow.css”。

其中mootools.js不用我多说，一个AJAX Library，

tpniceslideshow.js这个呢就是一个Slideshow的实现类，有兴趣的朋友可以研究这个东西，里面有很多参数可自定义，
tpniceslideshow.css这个是对Slideshow的CSS基本定义，若有需要也可以直接修改这个文件。

自定义Slideshow的CSS

<style type="text/css">
/*Slideshow*/
.TPNSSwrapper {
width: 626px;
}
 
#TPNiceSlideShowMenu div img {
float: left;
margin:  8px;
}
 
/*右边滚动菜单*/
#TPNiceSlideShowMenu div {
height: 60px;
width: 246px;
}
 
 
/*菜单项目*/
TPNiceSlideShowMenuContent {
text-align: left;
}
 
/*SlideShow内容区域*/
#TPNiceSlideShow {
height: 300px;
width: 356px;
float: left;
}
/*右边滚动内容区域*/
#TPNiceSlideShowMenuWrp {
height: 300px;
width: 246px;
overflow:hidden;
}
 
/*滚动条*/
.tpniceslideshow_scrollbar-vert{
height: 300px;
width: 22px;
float:right;
}
/*滚动条按钮*/
.tpniceslideshow_handle-vert{
width: 22px;
}
/*内定描述*/
.TPNiceSlideShowGallery .slideInfoZone {
height: 300px;
width: 200px;
background: #333333;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -100px;
}
</style>

新建Slideshow实例

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

以上内容都在head内完成的，也就是头部需要定义的，下面说说主体内容实现方法。