一个幻灯,在标题的地方出现问题。谷歌浏览器表现正常。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);
}
}
望各位大神指点一二,小弟不胜感激。