WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 简单实现首页幻灯片代码【Gztro版】

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

PCDotFan10年前

 

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

 

公子府在近期发布了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'); ?>

 

#幻灯片
1
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (15)
再想想
  • 螳螂虾

    应该来个效果示范,不然都懒得去加代码测试。

    10年前
    • WP酷

      @螳螂虾 我忘了OMG……稍后加效果

      10年前
  • 90博客

    爱好者,求换友链。。。。

    10年前
    • WP酷

      @90博客 加上咯~

      10年前
    • 90博客

      @WP酷 OK,我也加好了。
      另外弱弱的提个建议,把新浪微博和feedsky的链接都加上nofollow。。。

      10年前
    • WP酷

      @90博客 =-=!这还真没注意到!现在去做~

      10年前
  • 花花工资

    请问一下这段代码是否对所有的WP主题都有效果呢?我想把我的主题首页也加一个幻灯片,但是我的主题用的是别人的主题,主题目录里面没有jquery.js文件,不知道能不能够实现你这个幻灯片效果呢?

    10年前
    • WP酷

      @花花工资 当然可以,只要引用了jquery库就好啦

      10年前
    • 花花工资

      @WP酷 博主,太感谢了,我成功了,刚开始有一个问题,就是my_thumbnail()这个函数在我的主题里面没有,报了个错误,结果我到主题的其它文件里面找了个另外的一个函数catch_first_image()用它来替换,没想到居然行了,现在能正常显示了,好高兴啊!没想到对php不懂的我居然也会移花接木啊!!!

      10年前
    • WP酷

      @花花工资 原来还可以这样呀……这方法我记下来,以后肯定有用~

      10年前
  • 同盟源 http://tmy123.com/

    怎么添加自己的图片呢

    8年前
    • 同盟源 http://tmy123.com/

      @同盟源 http://tmy123.com/ 提示slider.php on line 6,第六航有错误

      8年前
  • 同盟源 http://tmy123.com/

    我解决了,我没用你这个,我自己用JQ弄了一个

    8年前
    • 同盟源 http://tmy123.com/

      @同盟源 http://tmy123.com/ 内容是自定义的,可能是调用文章出了问题

      8年前
  • 爱特森

    多谢博主分享

    8年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
WordPress 出现侧边栏错位原因分析及解决方法
8年前
[包养]AirUnicom 为10位优秀博主长期免费提供托管服务
9年前
自动为WordPress文章设置特色图像
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1