首页 > 文章 > web前端 > jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox_图象特效

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

WBOY原创: 2016-05-16 19:16:42879浏览

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需刷新才能执行]

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：用roll.js实现的图片自动滚动+鼠标触动的特效_javascript技巧下一篇：关于javascript函数的几个话题_javascript技巧

查看更多

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

相关文章