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

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

1
<div class="focus mb-b">
2
  <div id="pic"><ul>
3
    <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>
4
    <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>
5
    <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>
6
    <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>
7
    <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>
8
    <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>
9
  </ul></div>    
10
  <div class="tip-bg"></div>    
11
  <div id="tip"><ul></ul></div>
12
  <div class="btn"><ul><li class="prev" id="focus_btn_left"></li><li class="next" id="focus_btn_right"></li></ul></div>  
13
</div>

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

1
function img_postthumb($cid) {
2
   $db = Typecho_Db::get();
3
   $rs = $db->fetchRow($db->select('table.contents.text')
4
       ->from('table.contents')
5
       ->where('table.contents.cid=?', $cid)
6
       ->order('table.contents.cid', Typecho_Db::SORT_ASC)
7
       ->limit(1));
8
9
   preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i", $rs['text'], $thumbUrl);  //通过正则式获取图片地址
10
   $img_src = $thumbUrl[1][0];  //将赋值给img_src
11
   $img_counter = count($thumbUrl[0]);  //一个src地址的计数器
12
13
   switch ($img_counter > 0) {
14
       case $allPics = 1:
15
           echo $img_src;  //当找到一个src地址的时候,输出缩略图
16
           break;
17
       default:
18
           echo "http://baidu.com/404";  //没找到(默认情况下),不输出任何内容
19
   };
20
}

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

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

1
<ul>
2
<?php $this->widget('Widget_Archive@indexfocus', 'pageSize=6&type=tag', 'slug=focus')->to($indexfocus); ?><?php while($indexfocus->next()): ?> 
3
    <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>
4
<?php endwhile; ?> 
5
</ul>

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

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

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

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

效果演示:长师青年在线

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