JS不兼容，或者cs不兼容！ie6中显示乱套了！！

Question

本帖最后由 Y4836867 于 2012-06-26 10:44:36 编辑

Answer 1

没办法看，楼主把demo整理下 贴出来

Answer 2

(function () {
    var imgbox = document.getElementById("imgbox");
    var pic_list = document.getElementById("pic_list");
    var pics = pic_list.getElementsByTagName("li");
    var button = document.getElementById("button").getElementsByTagName("li");
    var p;
    var start;
    function autoplay(start) {
        for (i = start; i < button.length; i++) {                                          
            (function () {
                var p = i;                                                                 
                button[i].onmouseover = function change() {                                
                    for (j = 0; j < this.parentNode.childNodes.length; j++) {              
                        this.parentNode.childNodes[j].setAttribute("className", "");       
                    }
                    this.className = "current";                                            
                    for (m = 0; m < pics.length; m++) {                                    
                        pics[m].className = "";                                            
                        if (m == p) {                                                      
                            pics[m].className = "show";                                    
                        }
                    }
                }
            })();
        }
    }
    autoplay(0);
})();

Answer 3

CSSul, li {list-style:none;}
.area {width:243px;height:248px;overflow:hidden;background:#fff;position:relative; margin-top: 8px;}
#pic_list {position:relative;}
#pic_list li {position:absolute; top:0;left:0;visibility:hidden;}
#pic_list li.show {visibility:visible;}
#pic_list li img {vertical-align:middle;}                                                                                                        
.button {width:243px;height:20px;line-height:20px;background:#ccc;position:absolute;bottom:0px;}
#button {float:right;}
#button li {float:left;width:18px;height:18px;text-align:center;margin:0 1px;font-family:"Arial";font-size:small;color:#fff;background:#000;}
#button li.current {background:#f00;cursor:pointer;}

Answer 4

html<div class="area mid" style="float: left; margin-left: 7px; padding-top: 0px;height:242px">
    <div id="imgbox" class="bbbb" style="margin-top: 0px; padding-top: 0px">
        <ul id="pic_list" class="" style="text-align: center;">
            <li class="show" id="one">
                <img src="images/新闻图片1号.jpg" style="margin-top: 0px;padding-top:0px"width="243px"height="245px" /></li>
            <li id="two">
                <img src="images/新闻图片备用2号.jpg" style="margin-top: 0px;padding-top:0px"width="243px"height="245px" /></li>
            <li id="three">
                <img src="images/新闻图片3号.jpg" style="margin-top: 0px;padding-top:0px"width="243px"height="247px" /></li>
        </ul>
        <div style="line-height: 18px; position: absolute; bottom: 0px; width: 240px">
            <ul id="button">
                <li class="current" id="but_one">1</li><li id="but_two">2</li><li id="but_three">3</li>
            </ul>
        </div>
    </div>
</div>

Answer 5

<div class="area mid" style="float: left
改成<div class="area mid" style="float: left; display:left这里是个ie6的使用float时margin双倍的bug，使用display:left可以修正。另外，楼上 做网页兼容ie6是必须的，因为你没有理由让客户从ie6升级

Answer 6

不是啊，你看我HTML代码不是三张图片么？  在ie6中这3张图片都显示出来了，不是自动滚页的

Answer 7

<div class="area mid" style="float: left; margin-left: 7px; padding-top: 0px; height: 242px; _overflow:hidden;">
        <div id="imgbox" class="bbbb" style="margin-top: 0px; padding-top: 0px">
            <ul id="pic_list" class="" style="text-align: center;">
                <li class="show" id="one">
                    <img src="images/1.jpg" style="margin-top: 0px; padding-top: 0px" width="243px"
                        height="245px" /></li>
                <li id="two">
                    <img src="images/2.jpg" style="margin-top: 0px; padding-top: 0px" width="243px"
                        height="245px" /></li>
                <li id="three">
                    <img src="images/3.jpg" style="margin-top: 0px; padding-top: 0px" width="243px"
                        height="247px" /></li>
            </ul>
            <div style="line-height: 18px; position: absolute; bottom: 0px; width: 240px">
                <ul id="button">
                    <li class="current" id="but_one">1</li><li id="but_two">2</li><li id="but_three">3</li>
                </ul>
            </div>
        </div>
    </div>
试试

Answer 8

<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="gbk">
<title></title>
<style type="text/css">
ul, li {list-style:none;}
.area {width:243px;height:248px;overflow:hidden;background:#fff;position:relative; margin-top: 8px;}
#pic_list {position:relative;}
#pic_list li {position:absolute; top:0;left:0;visibility:hidden;}
#pic_list li.show {visibility:visible;}
#pic_list li img {vertical-align:middle;}   
.button {width:243px;height:20px;line-height:20px;background:#ccc;position:absolute;bottom:0px;}
#button {float:right;}
#button li {float:left;width:18px;height:18px;text-align:center;margin:0 1px;font-family:"Arial";font-size:small;color:#fff;background:#000;}
#button li.current {background:#f00;cursor:pointer;} </style>
</head>
<body>
<div class="area mid" style="float: left; margin-left: 7px; padding-top: 0px;height:242px">
  <div id="imgbox" class="bbbb" style="margin-top: 0px; padding-top: 0px">
  <ul id="pic_list" class="" style="text-align: center;">
  <li class="show" id="one">
  <img src="http://avatar.profile.csdn.net/3/A/9/2_y4836867.jpg" style="margin-top: 0px;padding-top:0px"width="243px"height="245px" /></li>
  <li id="two">
  <img src="http://avatar.profile.csdn.net/3/A/9/2_y4836867.jpg" style="margin-top: 0px;padding-top:0px"width="243px"height="245px" /></li>
  <li id="three">
  <img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif" style="margin-top: 0px;padding-top:0px"width="243px"height="247px" /></li>
  </ul>
  <div style="line-height: 18px; position: absolute; bottom: 0px; width: 240px">
  <ul id="button">
  <li class="current" id="but_one">1</li><li id="but_two">2</li><li id="but_three">3</li>
  </ul>
  </div>
  </div>
</div> <script type="text/javascript">
(function () {
  var imgbox = document.getElementById("imgbox");
  var pic_list = document.getElementById("pic_list");
  var pics = pic_list.getElementsByTagName("li");
  var button = document.getElementById("button").getElementsByTagName("li");
  var p;
  var start;
  function autoplay(start) {
  for (i = start; i < button.length; i++) {   
  (function () {
  var p = i;   
  button[i].onmouseover = function change() {   
  for (j = 0; j < this.parentNode.childNodes.length; j++) {   
  this.parentNode.childNodes[j].className = '';   
  }
  this.className = "current";   
  for (m = 0; m < pics.length; m++) {   
  pics[m].className = "";   
  if (m == p) {   
  pics[m].className = "show";   
  }
  }
  }
  })();
  }
  }
  autoplay(0);
})(); </script>
</body>
</html>试试
贴demo最好 整理为一个html，与人方便,与己方便 

Answer 9

由http://b305.photo.store.qq.com/psb?/V10wgC8F1eDapd/vtH*rNHfBbhkZEc2BSx5SUcahSHnPxVMIZn1l0dBxcA!/b/YSYK2bVQjwAAYi3gzLV5kQAA
变成
http://b310.photo.store.qq.com/psb?/V10wgC8F1eDapd/ifXyhjVodVzi.lCzMyqa*47cJa20WHBL3Z5KBou*xY4!/b/YcVrz7gdCAAAYiMG1Li3BwAA
虽然变了，但是还是不好使啊！

Answer 10

谢谢提醒，之前不会贴图，这回有图了，我发一下IE6的，在发一下IE8的。