phpcms v9 首页焦点图片大挪移
发布:smiling 来源: PHP粉丝网 添加日期:2014-10-22 16:44:13 浏览: 评论:0
将默认模板里面的焦点图片放到自己喜欢的位置,如何做?难不难?看我下面的操作步骤.
1.先将这两行加到head部分:
<script type="text/javascript" src="{JS_PATH}jquery.min.js"></script>
<script type="text/javascript" src="{JS_PATH}jquery.sgallery.js"></script>
2.将这部分放到要放的位置,代码如下:
- <div class="slide">
- <div class="FocusPic">
- {pc:content action="position" posid="1" order="listorder DESC" thumb="1" num="5"}
- <div class="content" id="main-slide">
- <div class="changeDiv">
- {loop $data $r}
- <a href="{$r['url']}" title="{str_cut($r['title'],30)}"><img src="{thumb($r['thumb'],451,292)}" alt="{$r['title']}" width="451" height="292" border="0" /></a> //phpfensi.com
- {/loop}
- </div>
- </div>
- {/pc}
- </div>
- </div>
3.这段也别忘了,放到</body>结束之前:
- <script type="text/javascript">
- $(function(){
- new slide("#main-slide","cur",451,292,1);//焦点图
- })
- </script>
4.css里面不要丢了这些,代码如下:
- .FocusPic{zoom:1;position:relative; overflow:hidden}
- .FocusPic .content{overflow:hidden}
- .FocusPic .changeDiv a{position:absolute;top:0px;left:0px;display:none;}
- .FocusPic .title-bg,.FocusPic .title{position:absolute;left:0px;bottom:0;width:434px;height:30px;line-height:30px;overflow:hidden}
- .FocusPic .title-bg{background:#000;filter:alpha(opacity=50);opacity:0.5;}
- .FocusPic .title a{display:block;padding-left:15px;color:#fff; font-size:14px;}
- .FocusPic .change{bottom:4px;height:20px;right:3px;*right:5px;_right:4px;position:absolute;text-align:right;z-index:9999;}
- .FocusPic .change i {background:#666;color:#FFF;cursor:pointer;font-family:Arial;font-size:12px;line-height:15px;margin-right:2px;padding:2px 6px; font-style:normal; height:15px;display:inline-block;display:-moz-inline-stack;zoom:1;*display:inline;}
- .FocusPic .change i.cur {background:#FF7700;}
试试搞定了吗?原创啊,要注明出处的.
Tags: phpcms焦点图片 phpcms首页焦点图
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)