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

参考：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>


posted @ 2012-10-26 12:38  hdchangchang  阅读(184)  评论(0)  编辑  收藏  举报