第一步后台新建页面：这个就不用说了大家都会 新建后FTP里面会出现如下一个模板页面
第二步从ftp里面下载 template的index.htm文件 给首页模板页面添加JS代码 如下
将这段jS 代码加入index.htm首页模板年的红色部分
<script language="javascript" src="{@G:design.url.js}/global.js"></script>
第三步将如下代码放入css文件下的style.css
/*焦点图*/
.forum_recommend .home_push_slide{
float:left;
}
.home_push_slidewrap{
float:left;
width: 260px;
display:inline;
height:300px;
}
.home_push_slide {
height: 300px;
overflow: hidden;
position: relative;
width: 260px;
background:#f5f5f5;
}
.home_push_slide img{
display: block;
}
.home_push_slide .num {
bottom:5px;
right: 5px;
position: absolute;
z-index:6;
}
.home_push_slide .num li {
float: left;
margin-left: 5px;
}
.home_push_slide .num li a {
background:#fff;
color: #000;
padding:0 5px;
}
.home_push_slide .num li a:hover,
.home_push_slide .num li.current a {
background: #f60;
color: #fff;
text-decoration: none;
}
.home_push_slide .caption {
background:#000;
background:rgba(0,0,0,.5);
bottom:0px;
height:30px;
/*opacity: 0.6;*/
position: absolute;
width: 100%;
z-index: 6;
}
.h2:{line-height:30px;}
.home_push_slide .caption p {
color: #fff;
height: 30px;
line-height: 30px;
text-indent: 10px;
width: 100%;
}
.home_push_slide .caption .h2 {
height:30px;
line-height:30px;
overflow:hidden;
text-indent:10px;
}
.home_push_slide .caption .h2 a {
color: #fff;
font-size: 12px;
}
第四步 新建JS文件 将如下JS代码放入JS文件，然后上传到js目录下
Wind.ready(‘global.js‘, function(){
Wind.use(‘slides‘, function(){
$(‘#J_slides‘).slides({
preload: false,
preloadImage: ‘{@theme:images}/common/loading.gif‘,
play: 5000,
pause: 100,
hoverPause: true,
effect : ‘slide‘, //渐隐切换fade, 默认为‘slide‘滚动
crossfade : true, //消去渐隐间隙空白
paginationClass : ‘J_slides_num‘,
generatePagination : false,
animationStart: function(current){
$(‘.caption‘).animate({
bottom:-55
},100);
},
animationComplete: function(current){
$(‘.caption‘).animate({
bottom:0
},200);
},
slidesLoaded: function() {
$(‘.caption‘).animate({
bottom:0
},200);
}
});
})
});
第五步后台模块模板添加 模块 名字就写成幻灯片 分类写成帖子 然后将如下代码复制进去
<div id="J_slides" class="home_push_slide">
<div class="slides_container">
<for:>
<div class="slide">
<a
href="{url}" title="" target="_blank"><img src="{thumb|320|230}"
width="320" height="230" alt="{title}"></a>
<div class="caption">
<div class="h2"><a href="{url}" target="_blank">{title|12}</a></div>
</div>
</div>
</for>
</div>
<ul class="J_slides_num num">
<for:>
<li><a href="">{$__k+1}</a></li>
</for>
</ul>
</div>
第六步，前台添加 就搞定了 如果有什么不懂的可以留言呢
本教程是参照论坛一位前辈的地址 我就是这么做实现的。
因为我一直想自己diy一个门户，苦于不懂如何diy幻灯片 ，所以很长一段时间都没有diy出门户
希望和我一样需要幻灯片的朋友，就不用走那么多弯路了