Jquery模仿flash幻灯片的问题

Question

    <div class="Flash">
      <ul id="ScrollBox">
        <li class="Show">
          <div class="Image"><a href="#"><img src="5.jpg" /></a></div>
          <div class="Text"><a href="#">苹果以音和游戏为先锋将进军</a></div>
        </li>
        <li>
          <div class="Image"><a href="#"><img src="4.jpg" /></a></div>
          <div class="Text"><a href="#">发生大事的发生法 的发放啊</a></div>
        </li>
        <li>
          <div class="Image"><a href="#"><img src="3.jpg" /></a></div>
          <div class="Text"><a href="#">啊啊对方身份的是否 是</a></div>
        </li>
      </ul>
      <ul id="ScrollNum">
        <li class="Selected">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
</div>ScrollBox里面的li默认是display:none;的
当用户鼠标移动到ScrollNum下的li时加上Selected这个，然后ScrollBox里面对应的第一个li属性要为display:block;
怎么弄？

Answer 1

<script type="text/javascript">
        $(document).ready(function(){
            $("#ScrollNum > li").bind("mouseover", function(){
                $(this).attr("class","Selected");
                $("#ScrollBox > li").eq($(this).html()-1).show();
            }); 
        }); 
    </script>

Answer 2

不行。我修改为这样就是图片不能自动隐藏~
        $(document).ready(function(){
var _temp=$("#ScrollNum li");
            $("#ScrollNum > li").bind("mouseover", function(){
_temp.removeClass();
                $(this).addClass("Selected");
                $("#ScrollBox > li").eq($(this).html()-3).show();
            }); 
        }); 

Answer 3

 $(document).ready(function(){
            $("#ScrollBox > li[class!='Show']").hide();
            $("#ScrollNum > li").bind("mouseover", function(){
                $(this).attr("class","Selected");
                $("#ScrollBox > li:visible").hide(); // 先隐藏起来
                $("#ScrollBox > li").eq($(this).html()-1).show();
            }); 
        }); 是啊。
早上好~

Answer 4

你那个有点问题哈。就是那个数字的1 2 3 4 5 加了class以后没有移除掉。。
我修改好了。
$(document).ready(function(){
  var _temp=$("#ScrollNum li");
  $("#ScrollBox > li[class!='Show']").hide();
  $("#ScrollNum > li").bind("mouseover", function(){
  _temp.removeClass();
  $(this).attr("class","Selected");
  $("#ScrollBox > li:visible").hide(); // 先隐藏起来
  $("#ScrollBox > li").eq($(this).html()-1).show();
  });  
  });

Answer 5

$(document).ready(function(){
setTimeout("aotuSliding()",1000);
   $("#ScrollBox > li[class!='Show']").hide();
    $("#ScrollNum > li").bind("mouseover", function(){
    $(this).parent().children().removeClass("Selected");
    $(this).attr("class","Selected");
    $("#ScrollBox > li:visible").hide(); // 先隐藏起来
    $("#ScrollBox > li").eq($(this).html()-1).show();
}); 
  }); 
var aotuSliding = function(){
var textIndex =$("#ScrollNum > li").index($("#ScrollNum > li[class='Selected']"));
if($("#ScrollNum > li").size()-textIndex==1){textIndex=-1;}
$("#ScrollNum > li[class='Selected']").removeClass("Selected");
    $("#ScrollNum > li").eq(textIndex+1).addClass("Selected");
var picIndex =$("#ScrollBox > li").index($("#ScrollBox > li:visible"));
if($("#ScrollBox > li").size()-picIndex==1){picIndex=-1;}
$("#ScrollBox > li:visible").hide();
    $("#ScrollBox > li").eq(picIndex+1).show();
setTimeout("aotuSliding()",1000);
}
.Selected{ color:red; font-size:18px;}我测试用的1秒。你自己改下吧。

Answer 6

$(document).ready(function(){
var t;
aotuSliding();
   //$("#ScrollBox > li[class!='Show']").hide();
    $("#ScrollNum > li").bind("mouseover", function(){
    $(this).parent().children().removeClass("Selected");
    $(this).attr("class","Selected");
    $("#ScrollBox > li:visible").hide(); // 先隐藏起来
    $("#ScrollBox > li").eq($(this).html()-1).show();
myStop();
}); 
$("#ScrollNum > li").bind("mouseout", function(){
    aotuSliding();
});
  }); 
var myStop = function(){
clearTimeout(t);
}
var aotuSliding = function(){
var textIndex =$("#ScrollNum > li").index($("#ScrollNum > li[class='Selected']"));
if($("#ScrollNum > li").size()-textIndex==1){textIndex=-1;}
$("#ScrollNum > li[class='Selected']").removeClass("Selected");
    $("#ScrollNum > li").eq(textIndex+1).addClass("Selected");
var picIndex =$("#ScrollBox > li").index($("#ScrollBox > li:visible"));
if($("#ScrollBox > li").size()-picIndex==1){picIndex=-1;}
$("#ScrollBox > li:visible").hide();
    $("#ScrollBox > li").eq(picIndex+1).show();
t = setTimeout("aotuSliding()",1000);
}
修改了下。鼠标放上去 停止。
差不多了吧。

Answer 7

参考：http://blog.csdn.net/IBM_hoojo/archive/2010/06/08/5655506.aspx

Answer 8

<!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 runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/jQuery.js" type="text/javascript"> </script>     <script type="text/javascript" language="javascript"> 
        $(document).ready(function() { 
            $("#menu dd:not(:first)").hide(); 
            $("#menu dt").click(function() {
                $("#menu dd:visible").slideUp("slow");
                $(this).next().slideDown("slow");
                //$(this).next().children().slideDown("slow");alert($(this).next().children().html()); 
            }); 
            $("#btn1").click(function() { $("#ooo").slideUp("slow") }); 
            //alert($("#ooo").html()); 
            $("#btn2").click(function() { $("#ooo").slideDown("slow"); }) 
        }) 
    </script> 
    <style type="text/css"> 
    dl 
{ 
    width:300px; 
    height:auto; 
    background-color:Fuchsia; 
    color:Lime; 
    font-size:15px; 
    border-style:dotted; 
    border: dotted 1px Maroon; 
} 
dl dt 
{ 
    height:25px; 
    line-height:25px; 
    vertical-align:middle; 
    border-bottom: solid 1px White; 
}
dl dd{
    display:block;
    margin:0;
    padding:0
}
ul 
{ 
    text-decoration:none; 
    color:MenuText; 
    background-color:Olive; 
    font-size:13px; 
    margin: 0; 
    left:-38px; 
    top: 0px; 
    width: 293px; 
    height:auto; 
} 
ul li 
{ 
    text-decoration:none; 
    height:24px; 
    line-height:24px; 
    vertical-align:middle; 
    border-bottom:solid 1px White; 
} 
</style> 
    
    <title> </title> 
</head> 
<body> 
<dl id = "menu"> 
  <dt>人事管理 </dt> 
  <dd>
    <ul>
      <li>信息一 </li> 
      <li>信息二 </li> 
      <li>信息三 </li> 
    </ul>
   </dd> 
  <dt>信息四 </dt> 
  <dd>
    <ul>
      <li>物品管理 </li> 
      <li>物品一 </li> 
      <li>物品二 </li> 
      <li>物品三 </li>    
      <li>物品四 </li> 
      <li>物品五 </li>
    </ul>
  </dd> 
  <dt>物品六</dt> 
  <dd>
    <ul>
      <li>文档管理</li> 
      <li>文档一 </li> 
      <li>文档二 </li> 
    </ul>
  </dd>
</dl> <dl> 
<dt>物品管理 </dt> 
<dd> 
<ul id="ooo"> <li>物品一 </li> <li>物品二 </li> <li>物品三 </li> <li>物品四 </li> <li>物品五 </li> </ul> </dd> 
<dt>文档管理 </dt> 
<dd> <ul> <li>文档一 </li> <li>文档二 </li> </ul> </dd> 
</dl> 
<input type="button" value="Up" id="btn1"/> 
<input type="button" value="Down" id="btn2"/> 
</body> 
</html>