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><br />

 

CSS:

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

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 );}) })} )<br />

 

问题及解决方法:

    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,菜单不做反应.