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;
}
第四步：如何在网站后台去控制切换图片的内容呢？很简单了，只需要在网站后台设置哪些要显示的内容的文章置顶即可，这样这些文章中的图片就会自动的调用到切换图中来了。