赞
踩
感谢H-ui、感谢CoreThink!
效果图:
不哆嗦了,代码:
- <div class="line"></div>
- <h5>友情链接</h5>
- <div class="pd-10 tags">
- <cms:friendly_link name="fl1" type="1">
- <a href="{$fl1.url}">{$fl1.title}</a>
- </cms:friendly_link>
-
- </div>
- <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>
- <br>
- <div class="container">
- <div class="line"></div>
- <h1>站点公告</h1>
- <table class="table table-hover">
- <tbody>
- <cms:notice_list name="vo" limit="8">
- <tr>
- <th><a href="{$vo.href}">{$vo.title|cut_str=0,20}</a></th>
- <td><span class="label label-secondary radius">{$vo.create_time|time_format}</span></td>
- </tr>
-
- </cms:notice_list>
- </tbody>
- </table>
- <div class="line"></div>
- <h5>友情链接</h5>
- <div class="pd-10 tags">
- <cms:friendly_link name="fl1" type="1">
- <a href="{$fl1.url}">{$fl1.title}</a>
- </cms:friendly_link>
-
- </div>
-
- </div>
-
-
- </block>
-
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。