简单实现首页幻灯片代码【Gztro版】

公子府在近期发布了Gztro1.1主题，属蓝色简洁风格，至周末WP酷将会介绍。今天要说的不是主题，而是幻灯片——首页幻灯片可以丰富页面，使页面变得不再单调。要实现这个并不难，来看看Gztro主题内的首页幻灯片代码：

使用方法

在载入了jQuery的前提下加入以下的JS代码：

$(function() {
	var sWidth = $("#slider").width();
	var len = $("#slider ul li").length;
	var index = 0;
	var picTimer;
	var btn = "<div class='btnBg'></div><div class='btn'>";
	for (var i = 0; i < len; i++) {
		btn += "<span></span>";
	}
	btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
	$("#slider").append(btn);
	$("#slider .btnBg").css("opacity", 0.5);
	$("#slider .btn span").css("opacity", 0.4).mouseenter(function() {
		index = $("#slider .btn span").index(this);
		showPics(index);
	}).eq(0).trigger("mouseenter");
	$("#slider ul").css("width", sWidth * (len));
	$("#slider").hover(function() {
		clearInterval(picTimer);
	},
	function() {
		picTimer = setInterval(function() {
			showPics(index);
			index++;
			if (index == len) {
				index = 0;
			}
		},
		4000);
	}).trigger("mouseleave");
	function showPics(index) {
		var nowLeft = -index * sWidth;
		$("#slider ul").stop(true, false).animate({
			"left": nowLeft
		},
		300);
		$("#slider .btn span").stop(true, false).animate({
			"opacity": "0.4"
		},
		300).eq(index).stop(true, false).animate({
			"opacity": "1"
		},
		300);
	}
});

之后在header.php载入此JS后，在主题的style.css文件中加入：

#slider {width:690px; height:246px; overflow:hidden; position:relative;}
#slider ul {height:246px; position:absolute;}
#slider ul li {float:left; width:690px; height:246px; overflow:hidden; position:relative; background:#000;}
#slider ul li div {position:absolute; overflow:hidden;}
#slider .btnBg {position:absolute; width:690px; height:20px; left:0; bottom:0;}
#slider .btn {position:absolute; width:680px; height:10px; padding:5px 10px; right:0; bottom:5px; text-align:right;}
#slider .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; margin-left:5px; cursor:pointer; background:#fff;}
#slider .btn span.on {background:#fff;}
#slider .pre {left:0;}
#slider .next {right:0; background-position:right top;}

新建一个名为imgbox.php的文件，保存在主题目录下的includes文件夹下（没有就新建一个）输入代码：

<div id="slider">
		<ul>
			<?php 
				$args=array( 
				'posts_per_page' => 5,
				'post__in'  => get_option('sticky_posts'),
				'caller_get_posts' => 10
				); 
				query_posts($args);
				if (have_posts()) : while (have_posts()) : the_post(); 
				?> 

				<li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" target="_blank">
					<?php if ( get_post_meta($post->ID, 'show', true) ) : ?>
					<?php $image = get_post_meta($post->ID, 'show', true); ?>
					<img src="<?php echo $image; ?>"width="690" height="250" alt="<?php the_title(); ?>"/>
					<?php else: ?>
					<?php if (has_post_thumbnail()) { the_post_thumbnail('home-thumb' ,array( 'alt' => trim(strip_tags( $post->post_title )), 'title' => trim(strip_tags( $post->post_title )),'class' => 'home-thumb')); }
					else { ?>
						 <img src="<?php echo my_thumbnail() ?>" alt="<?php the_title(); ?>" width="690" height="250" />
					<?php } ?>
					<?php endif; ?>
					</a>
				<?php endwhile; endif; wp_reset_query();?> 
			</li>
		</ul>
</div>

大功告成！在需要调用的地方插入：

<?php include(TEMPLATEPATH . '/includes/imgbox.php'); ?>