新版Gztro在首页增加了幻灯片选项，有网友需要此效果，这些代码都在Gztro主题中，为了方便，把代码整理出来。这个网上很多js焦点图效果都可以实现，只是需要将文章调用整合进去就可以了。

Gztro使用的首页幻灯片代码整理

首先前提是要载入了jquery库。
截下来载入js，将以下js加到你主题的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);
	}
});

如果只有在首页先是幻灯片的话，可以单独载入，如:

<?php if ( is_home() ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Gztroslider.js"></script>
<?php } ?>

至于调用的话，下载附件中的文件，放进主题目录，在要显示的位置include即可：

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

最后是加入样式：

#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;}

所需附件：Gztro_slider_20130505

动态效果可见Gztro主题演示：http://demo.gongzi.org/?themedemo=Gztro