高人帮忙,焦点图为何在IE6下面有错位的情况?
- 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"> #focus_box{ width:530px; height:180px; position:relative; margin:0 auto; overflow:hidden; zoom:1;} #focus_box ul{ list-style:none; padding:0; margin:0;} #focus_btn{ position:absolute; right:5px; bottom:5px; z-index:2;} #focus_pic{ position:absolute;} #focus_pic li{ height:180px; width:530px; margin:0; padding:0;} #focus_btn li{ float:left; font-size:12px; width:25px; height:25px; line-height:25px; font-weight:bold; text-align:center; background:#fff; color:#000; margin-right:2px; cursor:pointer;} #focus_btn li.on{ background:#f60; color:#fff;} img{border:none; margin:0;padding:0; disaplay:block;}</style></head><body><div id="focus_box" > <ul id="focus_pic" style="left:0;top:0;"> <li><a target="_blank" href="#"><img src="http://img.fqmall.cn/WebResources/boc/Xdv/shopping/images/20111201/530_180.jpg" width="530" height="180"></a></li> <li><a target="_blank" href="#"><img src="http://img.fqmall.cn/WebResources/boc/Xdv/shopping/images/20111202/530_180.jpg" width="530" height="180"></a></li> <li><a target="_blank" href="#"><img src="http://img.fqmall.cn/WebResources/boc/Xdv/shopping/images/20111205/530_180.jpg" width="530" height="180"></a></li> <li><a target="_blank" href="#"><img src="http://img.fqmall.cn/WebResources/boc/Xdv/shopping/images/20111201/530_180.jpg" width="530" height="180"></a></li> <li><a target="_blank" href="#"><img src="http://img.fqmall.cn/WebResources/boc/Xdv/shopping/images/20111202/530_180.jpg" width="530" height="180"></a></li> <li><a target="_blank" href="#"><img src="http://img.fqmall.cn/WebResources/boc/Xdv/shopping/images/20111205/530_180.jpg" width="530" height="180"></a></li> </ul> <ul id="focus_btn"> <li class="">1</li> <li class="">2</li> <li class="">3</li> <li class="">4</li> <li class="">5</li> <li class="">6</li> </ul></div><script type="text/javascript">(function(){ var picHeight = 180;//幻灯片的高度 var picWidth = 530;//幻灯片的宽度 var autoTime = 1000;//自动播放间隔时间 var index = 0; //从第几个开始轮播,0为第一个 var v = 1;//1为垂直播放,0为水平播放 var focusPics = document.getElementById("focus_pic");//获得幻灯片的框架ID var focusLi = focusPics.getElementsByTagName("li"); var picNo = focusLi.length;//幻灯片的数量 var Timer,autoTimer; var posX,posY;//移动的目标距离 var focus_btn = document.getElementById("focus_btn"); var btnLi = focus_btn.getElementsByTagName("li"); btnLi[0].className = "on"; if(v==0){//当方向为水平移动时候 focusPics.style.width = picNo*picWidth + "px"; //设置包裹UL的宽度为LI的数量乘以图片的宽度 for(var i=0;i<picNo;i++){//设置样式 focusLi[i].style.float = "left"; focusLi[i].style.height = picHeight + "px"; focusLi[i].style.widht = picWidth + "px"; } }else if(v==1){ //垂直方向 for(var i=0;i<picNo;i++){ focusPics.style.width = picWidth + "px"; } } function autoPlay(){//自动播放函数 if(autoTimer){clearInterval(autoTimer)}; //清除播放避免重复播放 Timer = setInterval(function(){move(index)} //调用移动函数,传入index值 ,autoTime); } function move(liIndex){ //移动 if(v == 1){//垂直移动时 posX = 0; posY = -(liIndex*picHeight);//取得垂直移动的目标TOP值 }else{//水平移动时 posX = -(liIndex*picWidth);//取得水平移动的目标LEFT值 posY = 0; } for(var i=0;i<picNo;i++){ btnLi[i].className = "";//清除按钮的样式 } btnLi[liIndex].className = "on";//设置按钮的样式 autoTimer = setInterval( function(){moveElement(posX,posY)},10); //调用缓冲移动到目标位置函数 } function moveElement(posX,posY){ //posX posY 为移动到的目标坐标 if(Timer){clearInterval(Timer)}; //移动的时候清除自动播放 //if(autoTimer){clearInterval(autoTimer)}; var stepx,stepy; if(!focusPics.style.left) focusPics.style.left = "0px"; //初始化 if(!focusPics.style.top) focusPics.style.top = "0px"; //初始化 var left = focusPics.style.left; var top = focusPics.style.top; left = parseInt(left,10); top = parseInt(top,10); if(left == posX && top==posY){//当到达目标位置时 if(autoTimer){clearInterval(autoTimer)}; //清除缓冲移动函数的间隙调用 Timer = setInterval( //自动播放下一个位置 function(){ move(index); index++;//索引加一 if(index==picNo){//当索引值等于LI的数量时 index = 0; //返回到第一个 } } ,autoTime); return false; }; if(left>posX){//判断移动的位置与现在的位置的大小 stepx = Math.ceil((left-posX)/10); left = left - stepx; }else if(left<posX){ stepx = Math.ceil((posX-left)/10); left = left + stepx; } if(top>posY){ stepy = Math.ceil((top-posY)/10); top = top - stepy; }else if(top<posY){ stepy = Math.ceil((posY - top)/10); top = top + stepy; } focusPics.style.left = left + "px"; focusPics.style.top = top + "px"; } function btnHover(){//小按钮的鼠标效果 var l = btnLi.length; for(var i=0; i<l;i++){ btnLi[i].onmouseover = function(t){ return function(){ if(autoTimer){clearInterval(autoTimer)};//清除播放后 index = t; move(t);//移动到this.index } }(i) } } autoPlay(); btnHover();})()</script></body></html>
代码如上,请指点
[解决办法]
IE6常见bug 添加css
li,img{ float:left}