WordPress 網站製作首頁頂部的輪播切換圖的方法，之前論壇中講過如何製作，但製作出來的輪播切換圖的尺寸是固定不變的，而且切換的圖片內容也是固定設置的，如果要更換圖片，就需要通過 FTP 去修改。
下面介紹一種非插件的方法制作 WordPress 網站輪播切換圖的方法，它最大的好處在於網站管理員可以隨意在網站後台去控制要顯示的內容。我們先來看看它製作好後的樣式吧！
第一步：在網站上需要顯示輪播切換圖的位置，放上以下的 PHP 代碼。
<!--圖片輪播區代碼開始-->
<div id="com_box" ><?php
$sticky = get_option('sticky_posts');
rsort( $sticky );//對數組逆向排序，即大 ID 在前
$sticky = array_slice( $sticky, 0, 5);//輸出置頂文章數，請修改 10，0 不要動，如果需要全部置頂文章輸出，可以把這句註釋掉
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
if (have_posts()) :while (have_posts()) : the_post();
?><div ><a href="<?php%20the_permalink();%20?>" target="_blank" title="<?php the_title(); ?>"><img src="<?php%20echo%20get_first_image();%20?>" width="750px" height="312px" alt="<?php the_title(); ?> 截圖" /></a></div>
<?php endwhile; endif; ?><ul id="com_txt" >
<?php
$sticky = get_option('sticky_posts');
rsort( $sticky );//對數組逆向排序，即大 ID 在前
$sticky = array_slice( $sticky, 0, 5);//輸出置頂文章數，請修改 10，0 不要動，如果需要全部置頂文章輸出，可以把這句註釋掉
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
if (have_posts()) :while (have_posts()) : the_post();
?><li><a href="<?php%20the_permalink()%20?>" target="_blank" title="<?php the_title(); ?>"> <?php the_title(); ?> </a></li>
<?php endwhile; endif; ?>
</ul>
<div id="com_loding" ></div>
</div>
<!--圖片輪播區代碼結束-->
第二步：即然是切換圖片，就少不了 JS 的幫助，所以我們還需要加一段 JS 代碼。 JS 代碼可以放在</body> 標籤的上方。
<script type="text/javascript">
function com_change()
{
var self_now = 0;
var self_speed = 5000;
var self_auto_change = null;
var self_max = $('#com_box div.img').size();
function self_change(i)
{
$('#com_box div.img').hide();
$('#com_txt_bg li').removeClass('on');
$('#com_txt li').removeClass('on');
$('#com_box div.img:eq(' + i + ')').show();
$('#com_txt_bg li:eq(' + i + ')').addClass('on');
$('#com_txt li:eq(' + i + ')').addClass('on');
}
function self_interval()
{
return setInterval(function(){
self_now++;
if (self_now >= self_max)
{
self_now = 0;
}
self_change(self_now);
}, self_speed);
}
$('#com_box div:first').show();
$('#com_txt_bg li:first').addClass('on');
$('#com_txt li:first').addClass('on');
$('#com_txt li').each(function(i)
{
$(this).mouseover(function(){
self_now = i;
clearInterval(self_auto_change);
self_change(i);
}).mouseout(function(){
self_auto_change = self_interval();
});
});
$(function(){
$('#com_loding').hide();
self_auto_change = self_interval();
});
}
com_change();
</script>
第三步：下面就是通過 CSS 來控制圖片顯示的樣式了，複製以下的 CSS 樣式，放到自己網站的 CSS 文件的最下方。
/*輪播切換圖樣式*/
.com_box {
width:750px;
height:312px;
overflow:hidden;
}.com_box div.loding {
width:750px;
height:312px;
z-index:40;
left:0;
top:0;
}.com_box ul.title li.last {
width:143px;
/*width:180px;*/
}
.com_box ul.title li.on {
filter:alpha(Opacity=80);
Opacity:.8;
}
.com_box ul.title {
position:absolute;
width:725px;
height:34px;
top:280px;
z-index:30;
margin-left:10px;
}
.com_box ul.title li {
width:144px;
/*width:180px;*/
height:34px;
overflow:hidden;
float:left;
margin-left:1px;
display:inline;
background:#000;
filter:alpha(Opacity=50);
Opacity:.5;
}
.com_box ul.title li a {
display:block;
text-align:center;
color:#FFFDFE;
height:34px;
line-height:30px;
}
.com_box ul.title li a:hover, .com_box ul.title li.on a {
background:url(arrow_focus.gif) no-repeat center 26px;
}
.com_sidebar {
width:220px;
}
.right_content_box {
border:1px solid #B4B4B4;
padding:1px;
background:#fff;
}
.right_content_box h2.title {
height:23px;
line-height:22px;
background:url(title_right_content.gif) repeat-x;
font-weight:normal;
padding-left:10px;
}
.right_content_box h2.announcement a:link, .right_content_box h2.announcement a:visited {
color:#fff;
}
.right_content_box h2.title span {
float:right;
padding-right:2px;
}
.right_content_box ul.list {
padding:4px 6px;
}
.right_content_box ul.list li {
background:url(arrow_01_20100813.gif) no-repeat 5px 9px;
padding-left:20px;
height:22px;
line-height:22px;
}
第四步：如何在網站後台去控制切換圖片的內容呢？很簡單了，只需要在網站後台設置哪些要顯示的內容的文章置頂即可，這樣這些文章中的圖片就會自動的調用到切換圖中來了。