参考：http://mrthink.net/demo/ijq20110321.htm
jquery 防止鼠标快速滑过： mouseenter的时候，setTimeout 延迟 执行，mouseleave的时候 clearTimeout
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {margin:0;padding:0}
li {list-style:none}
body {font-size:12px;}
.outbox {750px;height:290px;margin-left:30px;margin-top:30px;}
.picqh {370px;height:290px;border:1px solid #e1e1e1;}
.bigpic {display:block;height:200px;360px; border:1px solid #e1e1e1; margin:0 auto;}
.selectxx {370px;height:290px;}
.box {345px;height:60px;margin-top:2px; background:url(http://mrthink.net/demo/images/20110320sprite.gif) right -74px no-repeat; padding:6px}
.boxhover {background-position:right 0;}
.fl {float:left}
.fr {float:right}
dt,dd {float:left}
dt {margin-left:5px;}
dd {220px; margin-left:5px;}
dt img {108px;height:60px;}
.wzsm {padding:10px;}
.wzsm h2 {font-size:14px}
.wzsm p {margin-top:10px; line-height:22px;}
</style>
<script type="text/javascript" src="ceshi/jquery-1.8.0.js"></script>
<script type="text/javascript">
(function($){
$.fn.hdp=function(iset){
iset=$.extend({
box:".box" //右边4个盒子的类名
},iset||{})
var $n=0; //初始化 box 的index()
function funa(){
var $url = $(iset.box).eq($n).find("dt").find("img").attr("src");
var $bth4 = $(iset.box).eq($n).find("dd").find("h4").text();
var $btp = $(iset.box).eq($n).find("dd").find("p").text();
$(iset.box).removeClass("boxhover");
$(iset.box).eq($n).addClass("boxhover"); //右边 box 切换类名
$(".bigpic").animate({opacity:0},300,function(){ $(this).attr("src",$url) });
$(".bigpic").animate({opacity:1},600,function(){ $(".wzsm h2").text($bth4);$(".wzsm p").text($btp);$n+=1;$n=($n==4)?0:$n; });
};
funa()
var $autotime;
var $tytime;
$autotime = setInterval(funa,3000);
$(iset.box).hover(function(){
clearInterval($autotime);
$(".bigpic").stop(true,true)
$n=$(this).index();
$tytime = setTimeout(funa,600)
},function(){
$autotime = setInterval(funa,3000)
clearTimeout($tytime);
});
}
return this;
})(jQuery);
$(function(){
$(".box").hdp()
})
</script>
</head>
<body>
<div class="outbox">
<div class="picqh fl">
<div class="imgbox">
<img src="http://mrthink.net/demo/images/demoimg/d_01.jpg" alt="" class="bigpic"/>
</div>
<div class="wzsm">
<h2>穿越历史长廊——兔子精的西安五日游</h2>
<p>那些消逝了的岁月仿佛隔着一块积着灰尘的玻璃看得到，抓不着...</p>
</div>
</div>
<div class="selectxx fr">
<div class="box box1">
<dl>
<dt><img src="http://mrthink.net/demo/images/demoimg/d_01.jpg"></dt>
<dd>
<h4>西安春季旅游：青龙寺踏青赏樱花</h4>
<p>那些消逝了的岁月仿佛隔着一块积着灰尘的玻璃看得到，抓不着...</p>
</dd>
<dd style="clear:both"></dd>
</dl>
</div>
<div class="box box2">
<dl>
<dt><img src="http://mrthink.net/demo/images/demoimg/d_02.jpg"></dt>
<dd>
<h4>穿越历史长廊——兔子精的西安五日游</h4>
<p>即使是不懂什么历史，也能在这个城市的每个角落感受到那厚厚的历史沉淀。</p>
</dd>
</dl>
</div>
<div class="box box3">
<dl>
<dt><img src="http://mrthink.net/demo/images/demoimg/d_03.jpg"></dt>
<dd>
<h4>西北逆行－第三站：西安－大雁塔</h4>
<p>西安，很精致，很大气，在兰州跟人学到的一个形容城市的词语。</p>
</dd>
</dl>
</div>
<div class="box box4">
<dl>
<dt><img src="http://mrthink.net/demo/images/demoimg/d_04.jpg"></dt>
<dd>
<h4>戶县探密寻画访真人 来一场农村盛宴</h4>
<p>有点儿喘不过气？是不是感觉生活有点儿乏味？想不想要吸点清新的空气？</p>
</dd>
</dl>
</div>
<div>
<div style="clear:both"></div>
</div>
</body>
</html>