图片切换出错
点击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+ 不觉得有点太多哦？能避免浮动尽量避免吧，浮动问题太多了