CoreThink主题开发（四）使用H-ui开发博客主题之首页幻灯片轮播

来源：互联网发布：dior fix it color 编辑：程序博客网时间：2024/04/28 10:52

感谢H-ui、感谢CoreThink！

效果图：

gif画质变了。

开源版的源码中后台做的比较完善，上传，选择幻灯片等，前台没有做轮播的显示，只定义了样式，cms_slider数据表是幻灯片的数据表，有个字段对应于admin_upload的字段，就像外键，将这两个表联系了起来，upload表存储的是图片的路径。

Blog/Home/Index/index.html

<extend name="$_home_public_layout"/><block name="style">    <style type="text/css">        .slider{position:relative;text-align:center; margin:0 auto;z-index:1;}        .slider .bd,.slider .bd li,.slider .bd img{width:960px; height:272px}/*请给每个幻灯片套个div并设置id，通过id重置这个地方的宽度，达到自定义效果*/        .slider .bd{z-index:2;overflow:hidden}        .slider .bd li{float:left;width: 100%;overflow:hidden; background-position:center; background-repeat:no-repeat}        .slider .bd li a{ display:block; width: 100%; height: 100%}        .slider .bd li img{display:block}        .slider .hd{ position: absolute; z-index: 3; left: 0; right: 0; bottom:10px; padding: 0 10px; text-align: center}        .slider .hd li{display:inline-block;text-align:center;margin-right:10px;cursor:pointer;background-color:#C2C2C2}        .slider .hd li.active{background-color:#222}        /*圆点*/        .dots li{width:10px; height:10px;font-size:0px;line-height:0px;border-radius:50%}        /*数字*/        .numbox li{width:20px; height:20px; line-height:20px; font-size:13px;font-family:Arial;font-weight:bold; text-indent:inherit;}        .numbox li.active{color:#fff}        /*长方条*/        .rectangle li{width:40px; height:10px;font-size:0px;line-height:0px}    </style></block><block name="script">    <script type="text/javascript" src="http://lib.h-ui.net/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>    <script type="text/javascript">        $(function(){            jQuery("#slider-3 .slider").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:700,interTime:7000,pnLoop:false,titOnClassName:"active"});        });    </script></block><block name="main">    <div id="slider-3">        <div class="slider">            <div class="bd">                <ul>                    <cms:slider_list name="sl">                        <li>                            <a href="{$sl.url}" target="_blank">                                <img src="{$sl.cover|get_cover}"/>                            </a>                        </li>                    </cms:slider_list>                </ul>            </div>            <ol class="hd cl dots">                <cms:slider_list name="sl">                    <li>{$i}</li>                </cms:slider_list>            </ol>        </div>    </div></block>

根据thinkphp的标签库，又熟悉了一遍。使用原来框架定义的标签。两次遍历了查表cms_slider的结果集，第一次是为了将图片显示出来，第二次是对应上小圆点轮播导航。

0 0