您的位置：首页 > 其它

图片自动切换避免鼠标快速滑过

2012-10-26 12:38 435 查看

参考：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            {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(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                 {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="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

图片自动切换 避免 鼠标快速滑过

图片自动切换避免鼠标快速滑过