[展示]手把手教你如何diy门户幻灯片

第一步后台新建页面：这个就不用说了大家都会新建后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出门户

希望和我一样需要幻灯片的朋友，就不用走那么多弯路了

巴特西

[展示]手把手教你如何diy门户幻灯片

最新文章

热门文章