phpcms v9 首页焦点图片大挪移

本文提供了一步到位的方法,教你如何在指定位置放置默认模板中的焦点图片,并附带了必要的代码片段和CSS样式说明。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

将默认模板里面的焦点图片放到自己喜欢的位置,如何做?难不难?

看我下面的操作步骤:

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>
                    {/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;}

试试搞定了吗?原创啊,要注明出处的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值