欢迎访问,本站接受互联网网站仿站、功能定制、定制插件、主题,如果需要的话可以联系我 QQ:2283276927

图片轮播功能(myFocus JS焦点图库)for zblog php的添加的方法(本站)

雨夜 3680次浏览 7个评论

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

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调整等,其中这里只是提供方法。希望对大家有所帮助。


涂涂研版版权所有,如未注明 , 均为原创,转载需注明出处。
发表我的评论换个身份
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7) 个小伙伴在吐槽
  1. 超喜欢这类型文章,希望出更多好文章。
    chenmo 2014-10-09 PM 10:17 回复
    • 呵呵。欢迎来访、一段时间后就开始更新此类文章。
      雨夜 2014-10-09 PM 10:22 回复
  2. 好像很牛的样子。。。
    爱浮夸 2014-06-11 PM 09:05 回复
    • 不牛,呵呵,学习只是。呵呵。慢慢来。
      雨夜 2014-06-11 PM 10:03 回复
  3. 看不懂代码,技术类的,我只能点赞!
    maillot 2014-06-11 PM 03:50 回复
    • 呵呵,谢谢。
      雨夜 2014-06-11 PM 08:43 回复
  4. 邮件订阅是邮箱的一种功能
    推荐QQ邮件订阅功能
    可以参考下 http://www.imlgm.com/93.html
    大谋 2014-06-10 AM 09:31 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们