图片切换失误-JavaSript-爱易网页

图片切换失误

日期：2014-05-16　浏览次数：20342 次

图片切换出错
点击1,2,3,4,5,在IE8里突出显示背景色没有过来，在Chrome里正常

HTML code

<!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();
求解。

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

图片切换失误

相关资料更多>

推荐阅读更多>