图片切换出错

点击1,2,3,4,5,在IE8里突出显示背景色没有过来，在Chrome里正常
<!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=gb2312" />
<title>图片切换</title>
<style type="text/css">
div,ul,li,p,image{ padding:0; margin:0;}
ul,ol{ list-style:none;}
#container{ margin:0 auto; width:998px;}
.imagechange{ width:500px;}
.image { width:500px;float:left;height:340px;}
.image li{float:left;display:none;}
.image li img{width:500px;height:340px;}
.switch{width:300px;float:left;background-color:#666666; height:20px;filter:alpha(opacity=50);opacity:0.5; margin-top:-24px; padding-left:200px; padding-top:4px;}
.switch li{font-size:11px;color:#FFFFFF; float:left; margin-left:12px;height:12px; background-color:#FF0000;padding:2px 2px;cursor:pointer; width:20px; text-align:center;}
.switch .imghere{ background:#00FF00;}
</style>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      $(".image li").first().show().siblings("li").hide();
      $(".switch li").click(function(){
        var index=$(this).index();
    $(this).addClass("imghere").siblings("li").removeClass("imghere");
    $(".image li").eq(index).fadeIn("slow").siblings("li").hide();  
      });
  });   
</script>
</head>
<body>
<div id="container">
  <div class="imagechange">
     <ul class="image">
   <li><img  src="images/change_1.jpg" alt="去年今日此门中"/></li>
   <li><img  src="images/change_2.jpg" alt="人面桃花相映红"/></li>
   <li><img  src="images/change_3.jpg" alt="人面不知何处去"/></li>
   <li><img  src="images/change_4.jpg" alt="桃花依旧笑春风"/></li>
   <li><img  src="images/change_5.jpg" alt="pia"/></li>
 </ul>
 <ul class="switch">
   <li class="imghere">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
 </ul>
  </div>
</div>
</body>
</html>重点在这一句  $(".image li").eq(index).fadeIn("slow").siblings("li").hide();
求解。

解决方案 »

  1.   

    可以切换图片，就是点击时imghere出现问题
      

  2.   

    filter:alpha(opacity=50);敢不要这句话不？？？还有就是你的两个UL为什么都要用浮动  你的第二个就不能用绝对定位吗？？你这样padding   200+ 不觉得有点太多哦？能避免浮动尽量避免吧，浮动问题太多了
      

  3.   

    .switch这个中的float改成position来定位他，这个推荐做法，还不用删除那个filter
    如果你是在想用浮动，那么你要注意清除浮动.imagechange{overflow:hidden;} 这样也行
      

  4.   

    谢谢，如果我采用相对定位，怎样让switch居下呢
      

  5.   

    我这样写.switch{width:300px;background-color:#666666; height:20px;filter:alpha(opacity=50);opacity:0.5; position:absolute;padding-left:200px; padding-top:4px; margin-top:316px;}按你说的，问题解决，非常感谢。
    另外，做透明层的一般方法是怎样的，新手请教。
      

  6.   

    你这样可以不用设置padding么margin  直接设置bottom和right就可以了。透明层一般就是利用position：relative；设置z-index高一点就可以了。相对定位不好，因为相对定位要在文档中占位置