Heim > Artikel > Web-Frontend > jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox_图象特效

jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox_图象特效

WBOYOriginal: 2016-05-16 19:16:42879Durchsuche

jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果在ie,firefox和测试一切正常,建议以后大家都要用这样的兼容性比较好的代码

<tr> 
    <td align="middle" bgcolor="#efefef">
 
      <div class="f12b" id="f_text"></div> 
      <script language="javascript" type="text/javascript"> 
"); 
p$(""); 
function change(){ 
if (ver==1){ 
with($('f_img').filters[0]){ 
Transition=1; 
apply(); 
play();  
} 
} 
if (firstTime){ firstTime=false;timeOut=_timeOut_/1000;} 
else{      
$('f_img').src=imgUrl[now]; 
$('f_img').alt=imgAlt[now]; 
$('f_imgLink').href=imgLink[now]; 
if (show_text) $('f_text').innerHTML=imgText[now];         
for (var i=0;i<count;i++) { 
$('b'+i).className="button"; 
$('f_menu'+i).className=""; 
} 
$('b'+now).className="on";     
$('f_menu'+now).className="on";      
now=(now>=imgUrl.length-1)?0:now+1; 
timeOut=_timeOut_;          
} 
theTimer=setTimeout("change()", timeOut); 
} 
function b_change(num){ 
window.clearInterval(theTimer);  
now=num; 
firstTime=false; 
change(); 
} 
//draw 渐变line （即css:f_line) 
function draw_line(){ 
var div = document.createElement("div");     
div.id = 'f_line'; 
$('f_infoDiv').insertBefore(div,$('f_infoDiv').childNodes.item(0));             
} 
//表现层 start     
//menu 
for(var i=0;i<count;i++){ 
var menu = document.createElement("a");         
//menu.className="f_menu"+i; 
menu.id="f_menu"+i; 
menu.href='#'; 
menu.value=i;         
menu.onmouseover=function(){b_change(this.value);}; 
menu.title=imgAlt[i]; 
menu.innerHTML=menuList[i]; 
$('f_menu').appendChild(menu); 
} 
//图片 
var a = document.createElement("a");         
a.id="f_imgLink"; 
a.target=target; 
a.href=imgLink[now];     
$('f_imgDiv').appendChild(a); 
var img = document.createElement("img");     
img.id="f_img"; 
img.width=imgWidth; 
img.height=imgHeight; 
img.src=imgUrl[now]; 
img.alt=imgAlt[now]; 
a.appendChild(img); 
//数字按钮 
for (var i=count-1;i>=0;i--){ 
var div_bg = document.createElement("div");         
div_bg.id = 'div_bg'+i; 
div_bg.className='bg'; 
$('f_buttonDiv').appendChild(div_bg);     
var a = document.createElement("a");         
a.id = 'b'+i; 
a.className = (i==now+1)?"button_on":"button_off";         
a.title=imgAlt[i]; 
a.innerHTML=i+1; 
a.href='javascript:b_change('+i+')';         
$('div_bg'+i).appendChild(a);     
var div= document.createElement("div"); 
$('f_buttonDiv').appendChild(div);             
}         
if (show_text) $('f_text').innerHTML = imgText[now]; 
//表现层 end 
$('f_img').onmouseover=function(){window.clearInterval(theTimer);} 
$('f_img').onmouseout=function(){theTimer=setTimeout("change()", timeOut2);} 
try{  //滤镜版本 
new ActiveXObject("DXImageTransform.Microsoft.Fade"); 
$('f_img').filters[0].play();       
ver=1; 
draw_line();  
} 
catch (e){ver=2;} 
var theTimer = setTimeout("change()", _timeOut_/1000); 
//--> 
</script> 
</td>
</tr> 
</tbody>
</table>
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：用roll.js实现的图片自动滚动+鼠标触动的特效_javascript技巧Nächster Artikel：关于javascript函数的几个话题_javascript技巧

In Verbindung stehende Artikel

Mehr sehen