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

Posted 2020-08-23

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

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