当前位置:首页 > CMS教程 > phpcms > 列表

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.将这部分放到要放的位置,代码如下:

  1. <div class="slide"
  2.             <div class="FocusPic"
  3.             {pc:content  action="position" posid="1"  order="listorder DESC" thumb="1" num="5"
  4.              <div class="content" id="main-slide"
  5.                     <div class="changeDiv">   
  6.                     {loop $data $r
  7.                         <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 
  8.                     {/loop} 
  9.                     </div> 
  10.                 </div> 
  11.             {/pc} 
  12.             </div>   
  13.         </div> 

3.这段也别忘了,放到</body>结束之前:

  1. <script type="text/javascript">  
  2. $(function(){ 
  3.  new slide("#main-slide","cur",451,292,1);//焦点图 
  4. }) 
  5. </script> 

4.css里面不要丢了这些,代码如下:

  1. .FocusPic{zoom:1;position:relativeoverflow:hidden
  2. .FocusPic .content{overflow:hidden
  3. .FocusPic .changeDiv a{position:absolute;top:0px;left:0px;display:none;} 
  4. .FocusPic .title-bg,.FocusPic .title{position:absolute;left:0px;bottom:0;width:434px;height:30px;line-height:30px;overflow:hidden
  5. .FocusPic .title-bg{background:#000;filter:alpha(opacity=50);opacity:0.5;} 
  6. .FocusPic .title a{display:block;padding-left:15px;color:#ffffont-size:14px;} 
  7. .FocusPic .change{bottom:4px;height:20px;right:3px;*right:5px;_right:4px;position:absolute;text-align:right;z-index:9999;} 
  8. .FocusPic .change i {background:#666;color:#FFF;cursor:pointer;font-family:Arial;font-size:12px;line-height:15px;margin-right:2px;padding:2px 6pxfont-style:normalheight:15px;display:inline-block;display:-moz-inline-stack;zoom:1;*display:inline;} 
  9. .FocusPic .change i.cur {background:#FF7700;} 

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

Tags: phpcms焦点图片 phpcms首页焦点图

分享到: