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

感谢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的结果集，第一次是为了将图片显示出来，第二次是对应上小圆点轮播导航。