JS不兼容，可能cs不兼容！ie6中显示乱套了！
JS不兼容，或者cs不兼容！ie6中显示乱套了！！
(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++) { //设置起始值为start参数.
(function () {
var p = i; // 为p赋值i. i等于0,1,2,3,4;
button[i].onmouseover = function change() { //button[0],button[1],button[2],button[3],button[4] onmouseover可以触发函数;
for (j = 0; j < this.parentNode.childNodes.length; j++) { //以this(当前触发事件的元素)为起点,的父节点的所有子节点的length值为最高值,开始遍历. ;
this.parentNode.childNodes[j].setAttribute("className", ""); //以this(当前触发事件的元素)为起点,的父节点的所有子节点的className为空. 危险慎用.;
}
this.className = "current"; //this. 即当前触发onmouseover的元素的className为"current";
for (m = 0; m < pics.length; m++) { //以pics.length为最高值进行遍历.遍历pics.;
pics[m].className = ""; //清空所有pics数组中所有元素的className;
if (m == p) { //当m==p (p==i) 所以m=i时,触发下列函数
pics[m].className = "show"; //pics的第m个元素的className值为show; m在这里等于i;
}
}
}
})();
}
}
autoplay(0);
})();
------解决方案--------------------
<div class="area mid" style="float: left
改成
<div class="area mid" style="float: left; display:left
这里是个ie6的使用float时margin双倍的bug，使用display:left可以修正。
另外，楼上 做网页兼容ie6是必须的，因为你没有理由让客户从ie6升级
------解决方案--------------------
<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>
试试
------解决方案--------------------
(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++) { //设置起始值为start参数.
(function () {
var p = i; // 为p赋值i. i等于0,1,2,3,4;
button[i].onmouseover = function change() { //button[0],button[1],button[2],button[3],button[4] onmouseover可以触发函数;
for (j = 0; j < this.parentNode.childNodes.length; j++) { //以this(当前触发事件的元素)为起点,的父节点的所有子节点的length值为最高值,开始遍历. ;
this.parentNode.childNodes[j].setAttribute("className", ""); //以this(当前触发事件的元素)为起点,的父节点的所有子节点的className为空. 危险慎用.;
}
this.className = "current"; //this. 即当前触发onmouseover的元素的className为"current";
for (m = 0; m < pics.length; m++) { //以pics.length为最高值进行遍历.遍历pics.;
pics[m].className = ""; //清空所有pics数组中所有元素的className;
if (m == p) { //当m==p (p==i) 所以m=i时,触发下列函数
pics[m].className = "show"; //pics的第m个元素的className值为show; m在这里等于i;
}
}
}
})();
}
}
autoplay(0);
})();
------解决方案--------------------
<div class="area mid" style="float: left
改成
<div class="area mid" style="float: left; display:left
这里是个ie6的使用float时margin双倍的bug，使用display:left可以修正。
另外，楼上 做网页兼容ie6是必须的，因为你没有理由让客户从ie6升级
------解决方案--------------------
<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>
试试
------解决方案--------------------