给typecho加上类似CMS焦点图轮播幻灯片功能效果（代码调用非插件）

2014-03-03

浏览 loading

先看一段html效果演示：长师青年在线，有人叫她幻灯片也有人叫焦点图还有叫轮换、轮播，当然你可以叫她动画片，如果我们要给自己Typecho加上一个焦点图轮播可能瓶颈主要在图片，因为其它地方和我们调用的列表没有任何区别。（其实可以不要看这段代码。。。）

<div class="focus mb-b">
  <div id="pic"><ul>
    <li><a href="http://xtw.cssf.cn/show/649.html" target="_blank"><img src="https://pic.yupoo.com/cssf/CpNg0MbL/medish.jpg" alt="校运会第一天——飞扬吧！青春" /><strong>校运会第一天——飞扬吧！青春</strong></a></li>
    <li><a href="http://xtw.cssf.cn/show/640.html" target="_blank"><img src="https://pic.yupoo.com/cssf/CpEQ47jA/medish.jpg" alt="“飞扬的青春，跳动的热情”长沙师范秋季阳光体育运动会团体操" /><strong>“飞扬的青春，跳动的热情”长沙师范秋季阳光体育运动会团体操</strong></a></li>
    <li><a href="http://xtw.cssf.cn/show/639.html" target="_blank"><img src="https://pic.yupoo.com/cssf/CpCHqkiW/medish.jpg" alt="“阳光体育，健康人生”我校运动会于今日正式开幕" /><strong>“阳光体育，健康人生”我校运动会于今日正式开幕</strong></a></li>
    <li><a href="http://xtw.cssf.cn/show/652.html" target="_blank"><img src="https://pic.yupoo.com/cssf/Cq0KlY5Z/medish.jpg" alt="习近平当选中共中央总书记" /><strong>习近平当选中共中央总书记</strong></a></li>
    <li><a href="http://xtw.cssf.cn/show/629.html" target="_blank"><img src="https://pic.yupoo.com/cssf/CpxAABbV/medish.jpg" alt="我校第八期团学干部培训班开班典礼隆重开幕" /><strong>我校第八期团学干部培训班开班典礼隆重开幕</strong></a></li>
    <li><a href="http://xtw.cssf.cn/show/625.html" target="_blank"><img src="https://pic.yupoo.com/cssf/CpxV2EuM/medish.jpg" alt="在创业中实现价值，在挑战中历练本领" /><strong>在创业中实现价值，在挑战中历练本领</strong></a></li>
  </ul></div>    
  <div class="tip-bg"></div>    
  <div id="tip"><ul></ul></div>
  <div class="btn"><ul><li class="prev" id="focus_btn_left"></li><li class="next" id="focus_btn_right"></li></ul></div>  
</div>

让typecho可以调文章中的第一张图或者附件图片

function img_postthumb($cid) {
   $db = Typecho_Db::get();
   $rs = $db->fetchRow($db->select('table.contents.text')
       ->from('table.contents')
       ->where('table.contents.cid=?', $cid)
       ->order('table.contents.cid', Typecho_Db::SORT_ASC)
       ->limit(1));

   preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i", $rs['text'], $thumbUrl);  //通过正则式获取图片地址
   $img_src = $thumbUrl[1][0];  //将赋值给img_src
   $img_counter = count($thumbUrl[0]);  //一个src地址的计数器

   switch ($img_counter > 0) {
       case $allPics = 1:
           echo $img_src;  //当找到一个src地址的时候，输出缩略图
           break;
       default:
           echo "http://baidu.com/404";  //没找到(默认情况下)，不输出任何内容
   };
}

请添加到你模版文件夹中的【functions.php】文件中，直接往文件后面空白处插，，，

让typecho单独调用一个分类或者标签的文章列表

<ul>
<?php $this->widget('Widget_Archive@indexfocus', 'pageSize=6&type=tag', 'slug=focus')->to($indexfocus); ?><?php while($indexfocus->next()): ?> 
    <li><a href="<?php $indexfocus->permalink(); ?>" target="_blank"><img src="<?php echo img_postthumb($indexfocus->cid,4); ?>" alt="<?php $indexfocus->title() ?>" /><strong><?php $indexfocus->title() ?></strong></a></li>
<?php endwhile; ?> 
</ul>

这里用到的是标签，如果弄个幻灯片还创建个分类杀鸡焉能用牛刀。
重考方法：typecho后台标签中添加一个标签【名称】可以是幻灯片也可以是焦点图，【缩略名】必须填focus（当然也可以填其它的但是要记得修改上面代码slug的值），然后编辑需要在博客展示焦点图轮播的文章【标签】写上刚才设置的标签名称。

参数解读：@indexfocus 作为标记可以随意修改，pageSize=6 其中6代表显示6张图也就是调最新的6个，type=tag 调用标签里的内容，slug=focus 标签中缩略名为focus的内容（也可以是cid=123 其中123代表标签的id，但是这样不科学），$indexfocus 代码片段有6个也是作为标记可以随意修改但是六个都要改到而且不要和其它片段重复。

后台标签添加好，function.php文件修改好，（调用片段修改好，如果按要求这步可省略），然后代码片段放到你模板里焦点图轮换位置即可。

本文中的代码堃埜参考了多位大神的和自己小改，部分代码片段来源不详，请作者前来认领。。。

效果演示：长师青年在线

关于焦点图轮播、幻灯片效果可以去懒人图库找自己喜欢的。。。

Relay Tips: 一极乐（ https://yijile.com/log/365/ ）