图片自动切换 避免 鼠标快速滑过
2012-10-26 12:38
330 查看
参考:http://mrthink.net/demo/ijq20110321.htm
jquery 防止鼠标快速滑过: mouseenter的时候,setTimeout 延迟 执行,mouseleave的时候 clearTimeout
示例:
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>
相关文章推荐
- 图片自动切换 避免 鼠标快速滑过
- 鼠标滑过列表图片放大,带列表序列号自动生成效果
- JS鼠标滑过图片时切换图片实现思路
- 鼠标移动,图片自动切换(简化版)
- 鼠标滑过图片切换函数(简化版)鼠标滑动效果
- 鼠标滑过选项卡切换图片
- 淘宝-鼠标滑过切换另一张图片
- JQUERY滑动选项卡自动切换鼠标滑过选项卡标签滑动切换选项卡
- 图片自动切换鼠标移上暂停6秒继续切换的js代码
- 带缩略图响应鼠标滑过图片切换的代码
- JS鼠标滑过图片时切换图片
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- JS鼠标滑过图片时切换图片实现思路
- 鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果
- div+css 带缩略图鼠标滑过切换图片
- jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- JQUERY滑动选项卡自动切换鼠标滑过选项卡标签滑动切换选项卡
- js实现图片自动切换效果。