公子府在近期发布了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'); ?>
应该来个效果示范,不然都懒得去加代码测试。
@螳螂虾 我忘了OMG……稍后加效果
爱好者,求换友链。。。。
@90博客 加上咯~
@WP酷 OK,我也加好了。
另外弱弱的提个建议,把新浪微博和feedsky的链接都加上nofollow。。。
@90博客 =-=!这还真没注意到!现在去做~
请问一下这段代码是否对所有的WP主题都有效果呢?我想把我的主题首页也加一个幻灯片,但是我的主题用的是别人的主题,主题目录里面没有jquery.js文件,不知道能不能够实现你这个幻灯片效果呢?
@花花工资 当然可以,只要引用了jquery库就好啦
@WP酷 博主,太感谢了,我成功了,刚开始有一个问题,就是my_thumbnail()这个函数在我的主题里面没有,报了个错误,结果我到主题的其它文件里面找了个另外的一个函数catch_first_image()用它来替换,没想到居然行了,现在能正常显示了,好高兴啊!没想到对php不懂的我居然也会移花接木啊!!!
@花花工资 原来还可以这样呀……这方法我记下来,以后肯定有用~
怎么添加自己的图片呢
@同盟源 http://tmy123.com/ 提示slider.php on line 6,第六航有错误
我解决了,我没用你这个,我自己用JQ弄了一个
@同盟源 http://tmy123.com/ 内容是自定义的,可能是调用文章出了问题
多谢博主分享