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

先看一段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="http://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="http://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="http://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="http://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="http://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="http://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文件修改好,(调用片段修改好,如果按要求这步可省略),然后代码片段放到你模板里焦点图轮换位置即可。

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

效果演示:长师青年在线

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

转载请注明转自:一极乐http://yijile.com/log/365.html


话题相关文章

话题标签

TypechoTypecho模版代码

一极乐 为乐趣而生

《给typecho加上类似CMS焦点图轮播幻灯片功能效果(代码调用非插件)》  发表时间:  最后更新时间:

谁来过

不知子曰邀请你对本文不足说出你的看法!

有 6 条评论

  1. 不知子曰

    抱歉没试过,还没升1

  2. 吴尼玛

    1.0的不行啊

  3. 不知子曰

  4. 过境千帆

    学习了

  5. 不知子曰

    【让typecho可以调文章中的第一张图或者附件图片】
    这一段写的很详细的

    如果想了解更多可以

    咨询下群友 40412938(QQ群)找蚂蚱/阳光/冰剑/还有很多。。。。




博主推荐专题

佛学资料Typecho模版代码乐知道CSS百度CyanogenMod
搜索引擎提交入口言辞


关闭

标签云

一极乐 衷心接受你的建议

TOP