JS_图片轮换导航

描述:

    1.图片自动轮换

    2.当鼠标放到菜单上时,菜单向上升起,同时显示相对应的图片

    3.鼠标离开菜单,图片继续自动轮换

 

效果图:

 

说明:

     菜单卡片绝对定位在大容器底部, 卡片下部分.bd元素通过高度的变化达到菜单升起降落的效果.

     使用了JQuery1.3

HTML:

<div id="contain"> <div> <a id="aimg1" href="#1" mce_href="#1"> <img alt="" src="images/img1.jpg" mce_src="images/img1.jpg" /> </a> <a id="aimg2" style="display:none" mce_style="display:none" href="#2" mce_href="#2"> <img alt="" src="images/img2.jpg" mce_src="images/img2.jpg" /> </a> <a id="aimg3" style="display:none" mce_style="display:none" href="#3" mce_href="#3"> <img alt="" src="images/img3.jpg" mce_src="images/img3.jpg" /> </a> </div> <div class="card card_1"> <div class="hd"><h3 class="hd">竭诚为您服务</h3></div> <div class="bd" style="display:none;" mce_style="display:none;"> <p>adlfsjf</p><span>sadkfljsadf</span> </div> </div> <div class="card card_2"> <div class="hd"><h3 class="hd">竭诚为您服务</h3></div> <div class="bd" style="display:none" mce_style="display:none"> <p>adlfsjf</p><span>sadkfljsadf</span> </div> </div> <div class="card card_3"> <div class="hd"><h3 class="hd">竭诚为您服务</h3></div> <div class="bd" style="display:none" mce_style="display:none"> sdfsdfsdf </div> </div> </div>

 

CSS:

 * { margin:0; padding:0;} a { text-decoration:none;} img { border:none;} #contain {/*容器使用相对定位*/ position:relative; width:921px; height:225px; overflow:hidden; } /*三个菜单卡片分别使用绝对定位,紧紧贴在容器下方bottom:0px*/ .card { position:absolute; left:55px; bottom:0px;} .card div.hd { width:220px; height:34px; background:url(images/bd.png) no-repeat;} .card div.hd h3 { height:34px; line-height:34px; background:url(images/1.gif) no-repeat 10px 5px; font-size:14px; text-indent:100px; cursor:pointer; } .card .bd { width:220px; height:63px; background:#D7F1FE;} .card_2 { left:328px;} .card_3 { left:614px;} .card_2 div.hd h3 { background-image:url(images/2.gif);} .card_3 div.hd h3 { background-image:url(images/3.gif);}

JS:

 $(document).ready( function play(){ var num_img = 3; //图片数量 var n = 2; //显示图片索引值(加载后显示图片1,所以从2开始) var delay = 3000; //图片切换间隔 var delay_1 = 500; //菜单伸缩间隔 var delay_2 = 250; //触发菜单伸缩的时间，小于此时间值则不产生动画 //切换图片的函数 function switchImage(){ //到达最后一张,从图片1开始 if(n > num_img){ n = 1;} //在chrom中效果有点问题，换另一种动画效果 if(($.browser.safari)){ $("#aimg" + n).siblings().hide(); $("#aimg" + n).show(); } else{ $("#aimg" + n).siblings().fadeOut("slow"); //显示第N张图片 $("#aimg" + n).fadeIn("fast"); } //索引值增加 n = n + 1; } var t = setInterval( switchImage , delay ); //对每一个菜单卡片元素操作 $("div.card").each(function(i){ $(this).hover( //mouseover时 function(){ var elem = $(this); if(t) clearInterval(t); //更新为当前指定图片的索引值 t1 = setTimeout(function(){ n = i + 1; switchImage(); elem.find(".bd").slideDown(delay_1); },delay_2); }, //mouseout时 function(){ if(t1) clearTimeout(t1); //console.log("out" ); $(this).find(".bd").slideUp(delay_1); //console.log("out"); //重新开始图片自动切换 t = setInterval( switchImage , delay ); } ) }) } )

 

问题及解决方法:

    1.写菜单的升降时遇到冒泡问题,使用cancalBubble = true及event.stopPropagation()都不得解?

       GOOGLE后发现使用mouseenter代替mouseover;用mouseleave代替mouseout后正常;

       最后发现使用JQ中的hover,问题得解(救星啊!);

    2.菜单多次滑动后出现图片空白,暂停不动的情况

       发现原因:

        原来写法: $("#aimg" + n).siblings().fadeOut("slow", function(){$("#aimg" + n).fadeIn("fast"); }); //这段调用fadeIn()方法两次(两个兄弟结点)...

     修改为:$("#aimg" + n).siblings().fadeOut("slow");

           $("#aimg" + n).fadeIn("fast");

     正常

    3.菜单滑动反应灵敏,鼠标快速反复滑过,然后离开,菜单条依然多次滑动

      这个是常见问题,改为使用setTimeout函数,如果在指定时间内鼠标离开,就clearTimeout,菜单不做反应.