碎碎念ZWS

一个精美的幻灯片，对于追求完美博客，做出精品网站的你，绝对是必不可少的！

wordpress的拓展性非常强，普普通通的页面，在程序猿、攻城狮的手上，必定是花开灿烂，光艳照人啊！

碎碎念已经痴迷上了wordpress博客设计了，放牛哥说我博客做不好就不舒服是种病，得治！我个人觉得，这不是一种病，这是一种怪病，爱上设计的怪病，一般人追求一个东西，是达到极致即可，而我，总是在达到一定的层面后，突然的一个想法，就让我把前面垒起的高塔统统推倒，从新来过，势必做到惊天地泣鬼神，结果，还没震撼到别人，碎碎念自己已经瘫倒在地，哀鸣着：“这特么，不是我要的效果呀！！不精彩，不华丽，不完美啊！！！”话毕，吐了一地的鸡血啊！然后把鸡血收拾收拾，重新开始上路了。。。。

今天给大家说说我这个图文幻灯片的结构吧。貌似，我已经很久没有出来爆代码了~~

添加后台设置

首先，在网站后台设置文件theme_options.php添加幻灯片的开关和设置选项：

array(  "name" => "是否显示幻灯片",   
        "desc" => "默认显示",   
        "id" => $shortname."_slider",   
        "type" => "select",   
        "std" => "Hide",   
        "options" => array("Display", "Hide")),        
array(  "name" => "<span class='child'>显示多少篇文章</span>",   
        "id" => $shortname."_sliderx",   
        "type" => "text",   
        "std" => "5"),         
array(  "name" => "<span class='child'>选择幻灯片显示的内容</span>",   
        "desc" => "<span class='child'>默认显示【置顶文章】，如果你选择【特定分类的文章】，请接着设置下面的选项</span>",   
        "id" => $shortname."_sliders",   
        "type" => "select",   
        "std" => "置顶文章",   
        "options" => array("置顶文章", "特定分类的文章")),   
array(  "name" => "<span class='child'>幻灯片显示的特定分类ID</span>",   
        "desc" => "<span class='child'>输入分类ID，多个分类ID请用英文逗号＂,＂隔开</span>",   
        "id" => $shortname."_cat_slider",   
        "type" => "text",   
        "std" => "1,2,3,4"),  

这里，我们提供了幻灯片是否开启、显示文章个数、显示文章类别（特定分类或者置顶文章）。一般来说，如果开启幻灯片，最适合的文章数量为5个，显示的为置顶文章。

构建幻灯片html文件

接着，我们在includes目录下新建一个slider.php ，输入以下代码：

<div id="box">   
 <div id="container">   
        <?php if (get_option('swt_sliders') == '特定分类的文章') { ?>   
        <?php include(TEMPLATEPATH . '/includes/cat_slider.php'); ?>   
        <?php } else { include(TEMPLATEPATH . '/includes/sti_slider.php'); } ?>        
            <?php if (have_posts()) : ?>   
            <?php while (have_posts()) : the_post(); ?>   
            <div class="item">   
            <div class="pic">   
        <a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>">   
        <?php if (has_post_thumbnail()) { the_post_thumbnail('thumbnail'); } else { ?>   
        <img class="home-thumb" title="<?php the_title(); ?>" src="<?php echo catch_first_image() ?>" alt="<?php the_title(); ?>"/>   
        <?php } ?>   
</a></div>   
<div class="con_post"><?php echo mb_strimwidth(strip_tags(apply_filters('the_excerpt', $post->post_content)), 0, 400,"...");?></div>   
<div class="slititle"><h3><a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="猛戳畅读 《<?php the_title_attribute(); ?>》"><?php echo mb_strimwidth(get_the_title(), 0, 38, '...'); ?></a></h3></div>   
</div>   
 <?php endwhile; ?>   
<?php endif; ?> </div>   
    <div id="control"></div>   
    <div class="clear0"></div>   
</div>

其中，<?php if (has_post_thumbnail()) { the_post_thumbnail('thumbnail'); } else { ?><img class="home-thumb" title="<?php the_title(); ?>" src="<?php echo catch_first_image() ?>" alt="<?php the_title(); ?>"/><?php } ?>是调用文章首张图片的缩略图，如果没有，则调用主题默认图片。可以直接替换为你自己主题的图片调用代码，这里仅针对本站主题说明。

子模块文件

幻灯片文件建立后，我们还需要两个文章，一个用来调用置顶文章，一个用来调用特定分类文章。在slider.php中，我们调用了这两个文件：

<?php if (get_option('swt_sliders') == '特定分类的文章') { ?>   
<?php include(TEMPLATEPATH . '/includes/cat_slider.php'); ?>   
<?php } else { include(TEMPLATEPATH . '/includes/sti_slider.php'); } ?>

特定分类文章cat_slider.php和置顶文章sti_slider.php
在slider.php所在同级目录includes下新建cat_slider.php，键入以下代码：

<?php   
    $cat_slider = explode(',', get_option('swt_cat_slider'));   
    $sliderx = get_option('swt_sliderx');   
    query_posts(array(   
        'posts_per_page' =>$sliderx,   
        'category__in' =>$cat_slider,   
        'caller_get_posts' => 10,   
        )   
    );   
?>

注意，这里最多调用10篇置顶文章，相信一般也不会超过这个数的。

同样地，我们建立sti_slider.php，键入下列代码：

<?php    
    $sliderx = get_option('swt_sliderx');   
    query_posts(array(   
        'posts_per_page' =>$sliderx,   
        'post__in'  => get_option('sticky_posts'),   
        'caller_get_posts' => 10   
        )   
    );   
?> 

幻灯片javascript脚本

幻灯片的内容设置完了，还差什么呢？
还差一个JS来让它动起来！我比较喜欢特别一点的效果，所以就让幻灯片从下往上渐变切换，采用的是百度有啊的广告幻灯源码，修改方向和各种参数，层叠切换，抽离的感觉啊有木有！把切换时间调小，切换超爽快！
在JS文件夹下新建一个slider.js :

function autoslider(obj)   
    {this.obj=$(obj);   
    this.container=$("container");   
    this.control=$("control");   
    this.items=$$$("item",this.container);   
    this.iCenter=2;   
    this.aSort=[];   
    this.timer=null;   
    this.oData=[   
        {top:-440,left:0,zIndex:3,opacity:0},   
        {top:-220,left:0,zIndex:3,opacity:0},   
        {top:0,left:0,zIndex:4,opacity:100},   
        {top:220,left:0,zIndex:3,opacity:0},   
        {top:440,left:0,zIndex:3,opacity:0}   
    ];   
    this.__create__()};   
    autoslider.prototype.__create__=function()   
{var that=this;   
var oSpan=null;   
var i=0;   

for(i=0;i<that.items.length;i++)   
{that.items[i].number=i;   
that.aSort[i]=that.items[i];   
oSpan=document.createElement("span");   
oSpan.number=i;   
that.control.appendChild(oSpan)}   
  
for(i=0;i<2;i++)this.aSort.unshift(this.aSort.pop());   
that.aSpan=$$("span",that.control);   
that.control.onmouseover=function(ev)   
  
{var oEv=ev||event;   
var oTarget=oEv.target||oEv.srcElement;   
if(oTarget.tagName.toUpperCase()=="SPAN")   
  
{that.aSort.sort(function(a,b){return a.number-b.number});   
  
if(oTarget.number<that.iCenter)   
  
{for(i=0;i<that.iCenter-oTarget.number;i++)   
    that.aSort.unshift(that.aSort.pop());   
that.__set__();   
return false}   
  
else if(oTarget.number>that.iCenter)   
{for(i=0;   
i<oTarget.number-that.iCenter;i++)that.aSort.push(that.aSort.shift());   
that.__set__();   
return false}   
  
else  
{that.__set__()}}}   
this.__set__();   
this.__switch__();   
this.__autoPlay__()};   
autoslider.prototype.__set__=function()   
  
{var i=0;   
for(i=0;   
i<this.aSort.length;i++)this.container.appendChild(this.aSort[i]);   
for(i=0;   
i<this.aSpan.length;i++)this.aSpan[i].className="";   
this.aSpan[this.aSort[this.iCenter].number].className="active";   
for(i=0;i<this.aSort.length;i++)   
  
{this.aSort[i].index=i;   
if(i<5)   
{new Animate(this.aSort[i],this.oData[i]);}   
else  
{new Animate(this.aSort[i],this.oData[this.oData.length-1])}}};   
autoslider.prototype.__switch__=function()   
{var i=0;   
var that=this;   
this.container.onclick=function(ev)   
{var oEv=ev||event;   
var oTarget=oEv.target||oEv.srcElement;   
var index=findItem(oTarget);   
if(index<that.iCenter)   
{for(i=0;   
i<that.iCenter-index;i++)that.aSort.unshift(that.aSort.pop());   
that.__set__();return false}   
else if(index>that.iCenter)   
{for(i=0;   
i<index-that.iCenter;i++)that.aSort.push(that.aSort.shift());   
that.__set__();return false}   
  
function findItem(element)   
{return element.className=="item"?element.index:arguments.callee(element.parentNode)}};};   
autoslider.prototype.__autoPlay__=function()   
{var that=this;   
that.timer=setInterval(function()   
{that.aSort[3].click()},3000);   
that.obj.onmouseover=function()   
{clearInterval(that.timer)};   
that.obj.onmouseout=function()   
{that.timer=setInterval(function()   
{that.aSort[3].click()},3000)}};   
  
function $(id)   
{return typeof id==="string"?document.getElementById(id):id};   
function $$(tagName,oParent)   
{return(oParent||document).getElementsByTagName(tagName)};   
function $$$(className,element,tagName)   
{var i=0;   
var aClass=[];   
var reClass=new RegExp("(^|//s)"+className+"(//s|$)");   
var aElement=$$(tagName||"*",element||document);   
for(i=0;i<aElement.length;i++)reClass.test(aElement[i].className)&&aClass.push(aElement[i]);   
return aClass};   
function css(element,attr,value)   
{if(arguments.length==2)   
{if(typeof arguments[1]==="string")   
{return element.currentStyle?element.currentStyle[attr]:getComputedStyle(element,null)[attr]}   
else  
{for(var property in attr)   
{property=="opacity"?(element.style.filter="alpha(opacity="+attr[property]+")",element.style.opacity=attr[property]/100):element.style[property]=attr[property]}}}   
else if(arguments.length==3)   
{switch(attr)   
{case"width":case"height":case"top":case"left":case"right":case"bottom":element.style[attr]=value+"px";   
break;   
case"opacity":element.style.filter="alpha(opacity="+value+")";   
element.style.opacity=value/100;   
break;   
default:element.style[attr]=value;   
break}}   
return element};   
function Animate(element,options,fnCallBack)   
{this.obj=$(element);   
this.options=options;   
this.__onEnd__=fnCallBack;   
this.__startMove__()};   
Animate.prototype.__startMove__=function()   
{var that=this;   
clearInterval(that.obj.timer);   
that.obj.timer=setInterval(function()   
{that.__doMove__()},30);};   
Animate.prototype.__doMove__=function()   
{var complete=true;   
var property=null;   
for(property in this.options)   
{var iCur=parseFloat(css(this.obj,property));   
property=="opacity"&&(iCur=parseInt(iCur.toFixed(2)*100));   
var iSpeed=(this.options[property]-iCur)/5;   
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);   
this.options[property]==iCur||(complete=false,css(this.obj,property,iSpeed+iCur))}   
complete&&(clearInterval(this.obj.timer),this.__onEnd__&&this.__onEnd__.apply(this.obj))};   
window.onload=function()   
{new autoslider("box")}; 

说明：（以上JS代码源自百度有啊，仅供开发设计参考，严禁用于商业用途，否则后果自负！）由于WP调用的是jquery库，所以把$都换成jQuery了!

（如果在进行其他wordpress调用js测试的过程中出现js失效，很有可能就是你复制过来的JS代码没有把$转换成jQuery。改变它，你会发现一切都那么顺利！）

前台调用幻灯片

幻灯片前台后台的排版和动作都设置完了，接下来，要在调用的地方来调用幻灯片，以Mystyle为例，我们在首页index.php调用幻灯片：

<?php if (get_option('swt_slider') == 'Display') { ?>   
<?php include(TEMPLATEPATH . '/includes/slider.php');  //幻灯片?>   
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/slider.js"></script>   
<?php } else {echo ''; } ?>   
<div class="clear"></div>

嗯，我们的准备都完成了，好像幻灯片已经准备就绪了吧，要不就直接put上去吧！No,no,no，还不能上线。纳尼！？

CSS样式

还缺少什么呀？
缺少样式呀骚年，木有样式你叫我看个XX啊？
大叔！你早点说嘛！敲得我头痛死了！
咳咳！样式表，拿去吧！从此，你就自己LU去吧！
style.css加入：

/** 幻灯片 **/  
li{list-style:none;}   
#box{width: 718px;margin:-18px auto 5px auto;border: 1px solid #ccc;background: #fff;-webkit-box-shadow: inset 0 -1px 10px #ddd;  -moz-box-shadow:inset 0 -1px 10px #ddd;  box-shadow:inset 0 -1px 10px #ddd;}   
#container{position:relative;height: 222px;z-index:0;background:#FFFFFF;overflow:hidden;padding:2px 0;}   
#container .item{position:absolute;top:0;z-index:0;width: 718px;height: 220px;opacity:1;background:#ffffff;}   
#container .item .pic{ float:left; width: 277px; height: 220px;display:inline;}   
#container .item .pic a{ color:#333333; }   
#container .item .pic a:hover{ color:#0088bb; }   
#container .item .pic img{width: 257px;height: 200px;vertical-align:top;padding: 10px;border: 0;}   
#container .home-thumb {max-height:200px;}   
.con_post {float: right;width: 417px;height: 196px;padding: 12px;line-height: 25px;text-indent: 2em;}   
.slititle {padding: 10px;height: 16px;width: 400px;background: #fff;float: left;display: none;}   
.slititle h3 {font-size: 16px;font-weight: normal;}   
.slititle h3 a{color:#000;border-bottom: 2px solid #08B;}   
.slititle h3 a:hover{color:#0088bb;}   
#control{height: 18px;width: 278px;text-align: center;}   
#control span{width: 20px;height: 8px;font-size:0;line-height:0;cursor:pointer;display:inline-block;background: #08b;margin-right:5px;margin-top: 3px;}   
#control span.active{background: #F0586C;}   
.slider_num{float:right;font-size:12px; padding:1px 5px 0 5px;line-height:20px; height:20px;}   
.slider_num a:link{color:#0088bb;}   
.slider_num a:hover{text-decoration:none;color:#C05732;margin:5px;} 

严重声明（不是郑重声明咩？O(╯□╰)o）：本幻灯片PHP代码来源于奶酪设计RayCMS主题，JS代码源自百度有啊，经碎碎念修改制作而成，本文涉及内容仅供设计参考，严禁用于商业用途！