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

来源：互联网发布：淘宝客微信返利机器人编辑：程序博客网时间：2024/04/30 03:31
参考：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>
图片自动切换 避免 鼠标快速滑过

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