老杨个人网站

老杨在首页使用了jquery的图片幻灯，个人感觉还挺酷的，今天有网友问我如何实现的，这里写出一个教程仅供参考，这种方法适用于任何JavaScript以及Flash的幻灯显示。

我在首页使用的是JavaScript的幻灯演示，用的是jQuery库，我现在基本上不使用Flash，因为Flash一般比较大，而且必须安装flash播放插件才可以，很多网站已经开始转向JavaScript，这是世界流行趋势。

准备工作：

1. 能够有一点网站设计的基础，css，JavaScript和html，如果能懂一点php就更好了，不懂也没关系，因为这个非常简单；
2. 自己找一个JavaScript的slideshow，可以使纯JavaScript，也可以基于jQuery库，都可以；

下面就进入实战了。首页的图片和文章必须是自动更新的，这就需要我们做一些设计：

1. 写文章的时候，给需要显示在slideshow的文章添加“置顶”这个tag，这样做的目的是为了让slideshow显示的时候知道你要在首页显示那些文章，待会儿就会看到了；
   
2. 写文章的时候，给需要显示在slideshow的文章添加自定义域（在撰写文章的下面），域的名称是“置顶图片”，值就是这篇文章对应的要显示的图片的地址；
   
3. 上面的设置就完成了，然后进入调用阶段。这时候你需要分析一下你下载回来的slideshow的Demo页面，分析一下这些代码，找到公共的部分，我这里给出我的方案，比如我的整个的html代码是这样的：
   ^?View Code HTML

   <div class="flashbox"> <div id="photoShow"> <div class="photo"> <a href="http://yangyongquan.com/2009/07/wujian-of-america-sucks.html" title="不是一般烂的《无间道风云》"> <img src="http://photo2.bababian.com/upload1/20090725/1A9B093BD191EBEF0E45A8A2E4BC7D39.jpg" alt="不是一般烂的《无间道风云》" /> </a></div> <div class="photo"> <a href="http://yangyongquan.com/2009/06/kindergarten.html" title="幼儿园：回味童年"> <img src="http://photo2.bababian.com/upload1/20090626/B6F5C62AA485F97D1F921F3597F12AB5_500.jpg" alt="幼儿园：回味童年" /> </a></div>   <div class="photo"> <a href="http://yangyongquan.com/2009/06/night-at-the-museum.html" title="博物馆奇妙夜"> <img src="http://photo2.bababian.com/upload1/20090620/64828C997B0F59556F675BEF813B1005_500.jpg" alt="博物馆奇妙夜" /> </a></div>   <div class="photo"> <a href="http://yangyongquan.com/2009/06/why-we-get-married.html" title="我们为什么要结婚"> <img src="http://photo2.bababian.com/upload1/20090610/6CC2B092124DA0510596B89E291766AF_500.jpg" alt="我们为什么要结婚" /> </a></div>   <div class="photo"> <a href="http://yangyongquan.com/2009/06/some-songs-recently.html" title="推荐几首最近在听的音乐"> <img src="http://photo2.bababian.com/upload1/20090608/5D57D8CDF2C2B3A05C06216AAF098E17_500.jpg" alt="推荐几首最近在听的音乐" /> </a></div>   </div> </div>

   仔细分析不难发现，公共部分就是：

   ^?View Code HTML

   <div class="photo"> <a href="http://yangyongquan.com/2009/07/wujian-of-america-sucks.html" title="不是一般烂的《无间道风云》"> <img src="http://photo2.bababian.com/upload1/20090725/1A9B093BD191EBEF0E45A8A2E4BC7D39.jpg" alt="不是一般烂的《无间道风云》" /> </a></div>

   这些都是一样的，只不过是里面的图片地址不同而已，找到这个很重要，因为下面我们要使用循环来显示图片了。

4. 在公共部分的外围插入如下代码，其实就是包着公共部分的那个元素，比如我这里就是在<div id=”photoShow”>这个元素的下面插入如下代码：
   ^?View Code PHP

   <div id="photoShow"> <?php $my_query = new WP_Query('tag=置顶&showposts=5'); //查找tag为“置顶”的五篇文章出来 while ($my_query->have_posts()) : $my_query->the_post(); //得到一篇文章 $feature_image = get_post_meta($post->ID, '置顶图片', $single = true);//得到文章的图片地址 ?> <div class="photo"> <a href="<?php the_permalink(); ?>" ><img src="<?php echo $feature_image; ?>" alt="<?php the_title(); ?>" /></a></div> <?php endwhile; ?> </div>

   现在看到这个公共部分多么重要了，因为while循环要包着这个公共部分，这样就可以显示五个公共部分了，把公共部分中的图片地址替换一下就可以了。

5. 把上述的代码插入到你的首页当中合适的位置，这个因为页面不同就不好说了。

好了，一切都完成了，以后你再想让文章在slideshow显示，只要设置一个tag，并且写一个自定义域，一切就可以了。

如果有问题，可以留言。

如果喜欢本站，敬请订阅：老杨个人网站。谢谢惠顾！