鼠标快速滑过"/>
图片自动切换 避免 鼠标快速滑过
参考：.htm
jquery 防止鼠标快速滑过： mouseenter的时候，setTimeout 延迟 执行，mouseleave的时候 clearTimeout
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<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 {width:750px;height:290px;margin-left:30px;margin-top:30px;}
.picqh {width:370px;height:290px;border:1px solid #e1e1e1;}
.bigpic {display:block;height:200px;width:360px; border:1px solid #e1e1e1; margin:0 auto;}.selectxx {width:370px;height:290px;}
.box {width:345px;height:60px;margin-top:2px; background:url(.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 {width:220px; margin-left:5px;}
dt img {width: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=".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=".jpg"></dt><dd><h4>西安春季旅游：青龙寺踏青赏樱花</h4><p>那些消逝了的岁月仿佛隔着一块积着灰尘的玻璃看得到，抓不着...</p></dd><dd style="clear:both"></dd></dl></div><div class="box box2"><dl><dt><img src=".jpg"></dt><dd><h4>穿越历史长廊——兔子精的西安五日游</h4><p>即使是不懂什么历史，也能在这个城市的每个角落感受到那厚厚的历史沉淀。</p></dd></dl></div><div class="box box3"><dl><dt><img src=".jpg"></dt><dd><h4>西北逆行－第三站：西安－大雁塔</h4><p>西安，很精致，很大气，在兰州跟人学到的一个形容城市的词语。</p></dd></dl></div><div class="box box4"><dl><dt><img src=".jpg"></dt><dd><h4>戶县探密寻画访真人 来一场农村盛宴</h4><p>有点儿喘不过气？是不是感觉生活有点儿乏味？想不想要吸点清新的空气？</p></dd></dl></div><div><div style="clear:both"></div>
</div></body>
</html>
更多推荐
图片自动切换 避免 鼠标快速滑过
发布评论