当前位置：首页 → 问答吧 → 紧急求助！jquery图片幻灯问题，鼠标离开后出错

紧急求助！jquery图片幻灯问题，鼠标离开后出错

时间：2010-05-29

来源：互联网

鼠标滑过就消除了自动播放的函数，但是鼠标离开之后幻灯片播放的规则和顺序就乱了，哪位大哥能帮忙看看问题出在哪了。谢谢啦！

<!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>简单的jquery幻灯之一</title> <script src="http://www.uedspace.com/zuopin/js/jquery.js" type="text/javascript"></script> <style type="text/css"> #slider{ margin:20px auto; height:240px; width:740px; position:relative; } #slider img{ position: absolute; top: 0px; left: 0px;display:none;} .num{ height25px; line-height:25px; margin-top:10px;} .num a{ display:inline-block; padding:0 10px; cursor:pointer;} .num .on{ background:#333; color:#fff;} </style> </head> <body> <div id="slider"> <img src="images/1.jpg" border="0" style="display:block;"/> <img src="images/2.jpg" border="0"/> <img src="images/3.jpg" border="0"/> <img src="images/4.jpg" border="0"/> <img src="images/5.jpg" border="0"/> </div> <div class="num"><a class="on">1</a><a>2</a><a>3</a><a>4</a><a>5</a></div> <script type="text/javascript"> var a =$(".num a"); var playimg =setInterval('showimg()',3000); a.hover(function(){ $(this).addClass("on").siblings().removeClass("on"); var index = a.index(this); $("#slider img").eq(index).show().siblings().hide(); clearInterval(playimg); },function(){ setInterval('showimg()',3000); }); var now=0; function showimg (){ //alert(now); pre=now===0?2:now-1; nxt=now===4?0:now+1; var div=$("#slider").children(); div.eq(now).fadeOut(0,function(){ div.css('z-index',1); div.eq(nxt).css("z-index",6).fadeIn(600); div.eq(pre).css("z-index",4); div.eq(now).css("z-index",5); now=nxt; }); $(".num a").removeClass("on").eq(now).addClass("on"); } </script> </body> </html>
提示：您可以先修改部分代码再运行

作者: luoronghang 发布时间: 2010-05-29

自己先顶一下，麻烦各位了，

作者: luoronghang 发布时间: 2010-05-29

搞定的代码共享一下...我也要这个功能

作者: iaw2001200 发布时间: 2010-05-29

少于4个字节???论坛BUG?

引用:

<SCRIPT type=text/javascript>
$(function(){
var index = 0;
$("#btn span").mouseover(function(){
   index  =  $("#btn span").index(this);
   showImg(index);
});
//滑入停止动画，滑出开始动画.
$('#Hanger').hover(function(){
         if(MyTime){
         clearInterval(MyTime);
         }
},function(){
         MyTime = setInterval(function(){
         showImg(index)
         index++;
         if(index==3){index=0;}
         } , 2000);
});
//自动开始
var MyTime = setInterval(function(){
   showImg(index)
   index++;
   if(index==3){index=0;}
} , 2000);
})
//关键函数：通过控制i ，来显示不通的幻灯片
function showImg(i){
   $("#img img")
      .eq(i).stop(true,true).fadeIn(800)
      .parent().siblings().find("img").hide();
   $("#btn span")
      .eq(i).addClass("current")
      .siblings().removeClass("current");
}
</SCRIPT>

作者: 8yong8 发布时间: 2010-05-29

兄弟，你发的那个代码有问题哦，只循环一次，第二遍只有数字循环，图片就不动了，

作者: luoronghang 发布时间: 2010-06-01