html,css,js 问题 ie中标题表现不正常，谷歌浏览器正常

Question

一个幻灯，在标题的地方出现问题。谷歌浏览器表现正常。ie10中，第一张图片的标题表现正常，第二个图片的标题往下移一部分，第三个就基本移的显示不出来了。我是菜鸟往大神指导。

下面见代码：（代码我是从网上抄的，修改了一点，望作者谅解啊）

html代码

<div id="box">
    <ul id="pic_list">
        <volist name="slide_fst" id="vo1">
            <li class="show2"><a href="{$vo1.link}" target="_blank"><img width="800" height="400"src="{$vo1.picurl|getpicurl}" alt="{$vo1.title}" /></a></li>
        </volist>
    <volist name="slide_gfst" id="vo">
        <li><a href="{$vo.link}" target="_blank"><img width="800" height="400"src="{$vo.picurl|getpicurl}" alt="{$vo.title}" /></a></li>
    </volist>
</ul>

<div class="mark"></div>

<ul id="text_list">
    <volist name="slide_fst" id="vo1">
        <li><h2 class="show"><a href="{$vo1.picurl}">{$vo1.title|msubstr=0,20}</a></h2></li>
    </volist>
    <volist name="slide_gfst" id="vo">
        <li><h2><a href="{$vo.picurl}">{$vo.title|msubstr=0,20}</a></h2></li>
    </volist>
</ul>

<div id="ico_list">
    <ul>
        <volist name="slide_fst" id="vo1">
        <li class="active"><a href="javascript:void(0)"><img width="64" height="34" src="{$vo1.picurl|getpicurl}" alt="{$vo1.title}" /></a></li>
        </volist>
        <volist name="slide_gfst" id="vo">
        <li><a href="javascript:void(0)"><img width="64" height="34" src="{$vo.picurl|getpicurl}" alt="{$vo.title}" /></a></li>
        </volist>
    </ul>
</div>

<a href="javascript:void(0)" id="btn_prev" class="btn"></a>
<a href="javascript:void(0)" id="btn_next" class="btn showBtn"></a>
</div>

css代码
#box{width:800px;height:400px;position:relative;overflow:hidden;float:left;}
#pic_list{position:relative;z-index:1;}
#pic_list li{position:absolute;left:0;top:0;opacity:0;fliter:alpha(opacity=0);z- index:1;}
#pic_list .show2{position:absolute;left:0;top:0;z-index:2;opacity:1;fliter:alpha(opacity=100);}
.mark{z-index:2;height:60px;width:800px;background:black;position:absolute;left:0;bottom:0;opacity:0.3;filter:alpha(opacity=30);}
#text_list{bottom:60px;left:20px;position:absolute;z-index:5;height:25px;overflow:hidden;border:1px red }
#text_list h2{display:none;}
#text_list .show{display:inline;}
#text_list a{color:#FFFFFF;font-family:"Microsoft YaHei";font-size:16px;font-weight:normal;text-decoration:none;}
#ico_list{position:absolute;bottom:10px;left:12px;width:525px;overflow:hidden;height:46px;z-index:3;}
#ico_list ul{width:1050px;position:absolute;left:0;top:0;}
#ico_list li{width:75px;float:left;}
#ico_list li a{width:68px;padding-top:6px;display:block;}
#ico_list li a img{border:2px solid #DFE8E4;height:36px;width:64px;background:#040303;opacity:0.7;filter:alpha(opacity=70);}
#ico_list .active{background:url(img/a_hover.gif) no-repeat center 0;}
#ico_list .active img{opacity:1;filter:alpha(opacity=100);border:3px solid #fff;height:34px;width:62px;}
.btn{background:url(img/btn.gif) no-repeat;height:38px;width:38px;position:absolute;bottom:11px;opacity:0.5;filter:alpha(opacity=50);cursor:default;z-index:3;}
.showBtn{opacity:1;filter:alpha(opcity=100);cursor:pointer;}
#btn_prev{right:56px;}
#btn_next{right:20px;background-position:right 0;}

js代码

function css(obj, attr, value){
if(arguments.length==2)
{
    if(attr!='opacity')
    {
        return parseInt(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
    }
    else
    {
        return Math.round(100*parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]));
    }
}
else if(arguments.length==3)
    switch(attr)
    {
        case 'width':
        case 'height':
        case 'paddingLeft':
        case 'paddingTop':
        case 'paddingRight':
        case 'paddingBottom':
            value=Math.max(value,0);
        case 'left':
        case 'top':
        case 'marginLeft':
        case 'marginTop':
        case 'marginRight':
        case 'marginBottom':
            obj.style[attr]=value+'px';
            break;
        case 'opacity':
            obj.style.filter="alpha(opacity:"+value+")";
            obj.style.opacity=value/100;
            break;
        default:
            obj.style[attr]=value;
    }

return function (attr_in, value_in){css(obj, attr_in, value_in)};
}

var MIAOV_MOVE_TYPE={
BUFFER: 1,
FLEX: 2

};

function miaovStopMove(obj)

{
clearInterval(obj.timer);
}

function miaovStartMove(obj, oTarget, iType, fnCallBack, fnDuring)

{
var fnMove=null;
if(obj.timer)
{
clearInterval(obj.timer);
}

switch(iType)
{
    case MIAOV_MOVE_TYPE.BUFFER:
        fnMove=miaovDoMoveBuffer;
        break;
    case MIAOV_MOVE_TYPE.FLEX:
        fnMove=miaovDoMoveFlex;
        break;
}

obj.timer=setInterval(function (){
    fnMove(obj, oTarget, fnCallBack, fnDuring);
}, 30);

}

function miaovDoMoveBuffer(obj, oTarget, fnCallBack, fnDuring)

{
var bStop=true;
var attr='';
var speed=0;
var cur=0;

for(attr in oTarget)
{
    cur=css(obj, attr);
    if(oTarget[attr]!=cur)
    {
        bStop=false;

        speed=(oTarget[attr]-cur)/5;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        css(obj, attr, cur+speed);
    }
}

if(fnDuring)fnDuring.call(obj);

if(bStop)
{
    clearInterval(obj.timer);
    obj.timer=null;

    if(fnCallBack)fnCallBack.call(obj);
}

}

function miaovDoMoveFlex(obj, oTarget, fnCallBack, fnDuring)

{
var bStop=true;
var attr='';
var speed=0;
var cur=0;

for(attr in oTarget)
{
    if(!obj.oSpeed)obj.oSpeed={};
    if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
    cur=css(obj, attr);
    if(Math.abs(oTarget[attr]-cur)>=1 || Math.abs(obj.oSpeed[attr])>=1)
    {
        bStop=false;

        obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
        obj.oSpeed[attr]*=0.7;

        css(obj, attr, cur+obj.oSpeed[attr]);
    }
}

if(fnDuring)fnDuring.call(obj);

if(bStop)
{
    clearInterval(obj.timer);
    obj.timer=null;

    if(fnCallBack)fnCallBack.call(obj);
}

}

window.onload=function(){
var aPicLi=document.getElementById('pic_list').getElementsByTagName('li');
var aTextLi=document.getElementById('text_list').getElementsByTagName('li');
var aIcoLi=document.getElementById('ico_list').getElementsByTagName('li');
var oIcoUl=document.getElementById('ico_list').getElementsByTagName('ul')[0];
var oPrev=document.getElementById('btn_prev');
var oNext=document.getElementById('btn_next');
var oDiv=document.getElementById('box');
var i=0;
var iNowUlLeft=0;
var iNow=0;

oPrev.onclick=function(){
    if(iNowUlLeft>0){
        iNowUlLeft--;
        oUlleft();
    }
    oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
    oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
}

oNext.onclick=function(){
    if(iNowUlLeft<aIcoLi.length-7){
        iNowUlLeft++;
        oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px';
    }
    oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
    oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
}

for(i=0;i<aIcoLi.length;i++){
    aIcoLi[i].index=i;
    aIcoLi[i].onclick=function(){
        if(iNow==this.index){
            return false;
        }
        iNow=this.index;
        tab();
    }
}

function tab(){
    for(i=0;i<aIcoLi.length;i++){
        aIcoLi[i].className='';
        //aPicLi[i].style.filter='alpha(opacity:0)';
        //aPicLi[i].style.opacity=0;
        aPicLi[i].className='';
        aTextLi[i].getElementsByTagName('h2')[0].className='';
        miaovStopMove(aPicLi[i]);

    }
    aIcoLi[iNow].className='active';
    //aPicLi[this.index].style.filter='alpha(opacity:100)';
    //aPicLi[this.index].style.opacity=1;

    miaovStartMove(aPicLi[iNow],{opacity:100},MIAOV_MOVE_TYPE.BUFFER);
    aTextLi[iNow].getElementsByTagName('h2')[0].className='show';
    aPicLi[iNow].className='show2';

}

function oUlleft(){
    oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px';
}

function autoplay(){
    iNow++;
    if(iNow>=aIcoLi.length){
        iNow=0;
    }
    if(iNow<iNowUlLeft){
        iNowUlLeft=iNow;
    }else if(iNow>=iNowUlLeft+7){
        iNowUlLeft=iNow-6;
    }
    oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
    oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
    oUlleft();
    tab();
}

var time=setInterval(autoplay,2000);
oDiv.onmouseover=function(){
    clearInterval(time);
}
oDiv.onmouseout=function(){
    time=setInterval(autoplay,2000);
}

}

望各位大神指点一二，小弟不胜感激。

Answer 1

该回复引自免费微信小程序-皆我百晓生:

---

这段代码是一个图片轮播的功能实现，主要包括以下几个部分：

1. 获取页面中的元素：通过getElementById()方法获取到页面中的一些元素，如oDiv、oPrev、oNext等。

2. 定义一些变量：包括iNow、iNowUlLeft等，用于记录当前显示的图片和ul的left值。

3. 给oPrev和oNext按钮添加点击事件：点击oPrev按钮时，ul向左移动一张图片的宽度；点击oNext按钮时，ul向右移动一张图片的宽度。同时，根据当前ul的left值，判断是否显示oPrev和oNext按钮。

4. 给每个图片添加点击事件：点击某个图片时，切换到对应的图片，并显示相应的文字。

5. 定义tab()函数：用于切换图片和文字的显示。在tab()函数中，先将所有图片和文字的样式重置，然后给当前图片和文字添加相应的样式。

6. 定义oUlleft()函数：用于设置ul的left值，实现ul的滚动效果。

7. 定义autoplay()函数：用于自动播放图片。在autoplay()函数中，先将iNow加1，然后判断iNow的值，如果超过了图片的数量，则将iNow重置为0。然后根据iNow的值，判断是否需要调整ul的left值，以及显示对应的图片和文字。

8. 使用setInterval()方法调用autoplay()函数，实现自动播放功能。同时，给oDiv添加鼠标移入和移出事件，分别清除和重新启动自动播放。

希望以上解释能够帮助到你，如果还有其他问题，请随时提问。