在HTML中很多时候会有鼠标滑动至一个文章标题或链接然后使得该篇文章的图片显示，这个可以通过 jQuery 来实现，而在通过wordpress管理后台当中，也可以通过一段代码来简单实现。

html代码的简单样式

<div class=”col-md-7″ style=”margin: 10px auto;” >

<h3 style=”font-size: 28px;”>实验中学热点新闻</h3>

<div class=”row”>

<div class=”col-sm-6 hot-left” >

<ul class=”list-group” style=”box-shadow: 2px 2px 5px #666;”>

<li class=”list-group-item”><a href=”#”>我小举行大型文艺活动</a><span class=”badge”>2016-10-25</span></li>

<li class=”list-group-item”><a href=”#”>我小举行大型文艺活动</a><span class=”badge”>2016-10-25</span></li>

<li class=”list-group-item”><a href=”#”>我小举行大型文艺活动</a><span class=”badge”>2016-10-25</span></li>

<li class=”list-group-item”><a href=”#”>我小举行大型文艺活动</a><span class=”badge”>2016-10-25</span></li>

<li class=”list-group-item”><a href=”#”>我小举行大型文艺活动</a><span class=”badge”>2016-10-25</span></li>

</ul>

</div>

<div class=”col-sm-6 hot-right” >

<ul class=”list-group” style=”text-align: center;box-shadow: 2px 2px 6px #16A085;”>

<li class=”list-group-item”><a href=”#”><img src=”img/news1.jpg” class=”img-responsive” alt=””></a></li>

<li class=”list-group-item”><a href=”#”><img src=”img/news2.jpg” class=”img-responsive” alt=””></a></li>

<li class=”list-group-item”><a href=”#”><img src=”img/news3.jpg” class=”img-responsive” alt=””></a></li>

<li class=”list-group-item”><a href=”#”><img src=”img/news4.jpg” class=”img-responsive” alt=””></a></li>

<li class=”list-group-item”><a href=”#”><img src=”img/news5.jpg” class=”img-responsive” alt=””></a></li>

</ul>

</div>

</div>

</div>

第一个DIV显示文章标题和时间

第二个div显示想对应图片，实现方法为调用函数

jQuery函数

// 主页热点新闻实现鼠标移动至新闻，显示对应图片

// 所有图片隐藏,隐藏这一步由CSS完成

//初始状态第一张图片显示

$(‘#center-top .hot-right>ul>li’).eq(0).show();

//当鼠标移至新闻链接上时，让该事件产生 回调函数

$(‘.hot-left>ul>li>a’).css(‘color’,’#666′)

$(‘.hot-left>ul>li’).mouseover(function(){

//获取该条新闻的key值，也可称下标

var j=$(this).index();

$(‘ .hot-left>ul>li’).css(‘background-color’,’#fff’)

$(this).css(‘background-color’,’#16A085′)

$(‘.hot-left>ul>li>a’).css(‘color’,’#666′)

$(‘.hot-left>ul>li>a’).eq(j).css(‘color’,’#fff’)

//隐藏所有图片

$(‘.hot-right>ul>li’).hide();

//对应下标的图片显示

$(‘ .hot-right>ul>li’).eq(j).show();

});

首先在WordPress的functions.php加入以下函数调用第一张图片，代码

//在Function.php里面加入一段获取首张图片的函数：

function catch_that_image() {

global $post, $posts;

$first_img = ”;

ob_start();

ob_end_clean();

$output = preg_match_all(‘/<img.+src=[\'”]([^\'”]+)[\'”].*>/i’, $post->post_content, $matches);

$first_img = $matches [1] [0];

if(empty($first_img)){

$first_img = get_bloginfo(‘template_directory’).”/img/default.jpg”;

}

return $first_img;

}

通过定义抓取第一张图片的函数catch_that_image()

然后在要实现的页面如index.php中使用loop循环

<ul class=”list-group” style=”text-align: center;box-shadow: 2px 2px 3px #16A085;”>

<?php query_posts(‘showposts=5&cat=3’); ?>

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post();?>

<li class=”list-group-item”><a href=”<?php%20the_permalink()%20?>”><img src=”<?php%20echo%20catch_that_image();%20?>” class=”img-responsive” alt=””></a></li>

<?php endwhile;?>

<?php endif;?>

</ul>

<?php wp_reset_query(); ?>

这样就能动态的实现这个功能了！