图片轮播功能（myFocus JS焦点图库）for zblog php的添加的方法（本站）-教程、积累-涂涂研版

直接介绍步骤了，不废话了。呵呵。

1.在需要添加的页面的头部<head>部分添加myFocus库。(当然了下面的脚本和css样式可以在所在页面的相关位置)

<script type="text/javascript" src="{$host}zb_users/theme/{$theme}/script/myfocus-2.0.4.min.js"></script>
<!--引入myFocus库--><script type="text/javascript" src="{$host}zb_users/theme/{$theme}/script/mf-pattern/mf_slide3D.js"></script>

<script type="text/javascript">
myFocus.set({
    id:'myFocus',//焦点图盒子ID
    pattern:'mF_quwan',//风格应用的名称
    time:3,//切换时间间隔(秒)
    trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
    width:672,//设置图片区域宽度(像素)
    height:250,//设置图片区域高度(像素)
    txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
});
</script>

<style type="text/css">
#myFocus{ width:670px; height:250px;margin:0 auto 10px auto;margin-bottom:40px;}
#foot_bm a,#foot_bm,p,p a{color:#666;}
</style>

2.在首页的适当位置添加如下代码：（根据最热评论（评论数）来显示图片切换的文章）

<div id="myFocus"><!--焦点图盒子-->
  <div class="loading"></div><!--载入画面(可删除)-->
  <div class="pic"><!--图片列表-->
    <ul>
      
     {php}
$order = array('log_CommNums'=>'DESC');
                $where = array(array('=','log_Status','0'));
                $array = $zbp->GetArticleList(array('*'),$where,$order,5, null,false);
                shuffle($array);
                        {/php}
     {foreach $array as $article}
        <li><a href="{$article.Url}"><img width="670" height="260" src="
          {php}
               $zuires=rand(1,4);
              $pattern="/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png]))[\'|\"].*?[\/]?>/";
              $content = $article->Content;
                           preg_match_all($pattern,$content,$matchContent);
                              if(isset($matchContent[1][0]))
                             $zuires=$matchContent[1][0];
                             else
                             $zuires="$host/zb_users/theme/$theme/style/img/suiji/$zuires.jpg";
                              {/php}
                            {$zuires}"  alt="{$article.Title}" text="{$article.Title}" /></a></li>
     {/foreach}
        </ul>
  </div>
</div>

3.在相应主题style目录下新建img文件夹，并且里面有四张图片，并且命名四张图片（根据自己的需要的图片来）的名称为1-4.jpg。

4.从网上下载myFocus JS焦点图库，解压或者复制里面的myfocus-2.0.4.min.js（或者其他版本的，但是要和head部分的名称一样哦。可以再网上下载，或者直接复制我的网站的，通过源码查看就可以得到。）到所在主题的script文件夹下；同时复制文件夹mf-pattern到script文件夹下。

5.全部保存完成后，进入后台，刷新缓存试试吧。

6.效果如本站，可能和你的不一样，我的是改变了风格，所以不怎么一样。所以要根据自己的喜好来。

ps：当然了，一些效果方面还是需要自己手工调整的。比如上面的第一步骤的各项参数的设置、css调整等，其中这里只是提供方法。希望对大家有所帮助。