js图片替换
日期：2014-05-16 浏览次数：20435 次
js图片轮换
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> <!-- --> </style> </head> <body> <div id="img_swicth" style="margin:100px 100px;"></div> </body> </html>
window.load=img_switch('img_swicth',['3.jpg','2.jpg','5.jpg'],['http://www.baidu.com','http://www.faw','http://www.126.com'],['这里是标题第一个标题','2','3'],250,200,25,true,true,'#9eafc1',0,8,18,18,'#fff','#f00',3000);
//容器DIV的ID,图片地址数组,图片链接地址数组,新闻标题数组,图片宽度,图片高度,标题框高度,是否显示标题,是否显示边框(不显示为false),边框颜色,边框填充,边框宽度,按钮宽度,按钮高度,按钮背景色,焦点按钮背景色,切换速度(毫秒));
var B=document.body;
function isIE(){
return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}
function $(id){
return document.getElementById(id);
}
function $N(Names){
return document.getElementsByName(Names);
}
function C$(element){
return document.createElement(element);
}
function img_switch(receptacle,imgSrc,imgUrl,newsTitle,imgWidth,imgHeight,titleHeight,showTitle,showRim,rimColor,rimFill,rimWidth,imgButtonWidth,imgButtonHeight,imgButtonBg,imgButtonOverBg,speed){
var num=0;
var imgPlay;
count=imgSrc.length;
if(!showRim){rimWidth=0;rimFill=0;}//边框是否显示
var rim=C$('div');//外侧边框
$(receptacle).appendChild(rim);
with(rim.style){
border=rimWidth+'px solid '+rimColor;
width=imgWidth+rimFill*2+'px';
height=imgHeight+titleHeight+rimFill*2+'px';
margin='0px';
}
var img_div=C$('div');//装载图片的DIV
rim.appendChild(img_div);
with(img_div.style){
width=imgWidth+'px';
height=imgHeight+titleHeight+'px';
margin=rimFill+'px';
overflow='hidden';
zIndex=900;
}
var img_a=C$('a');//图片链接A标签
img_div.appendChild(img_a);
img_a.target='_blank';
img_a.id='img_a';
with(img_a.style){
display='block';
width=imgWidth+'px';
height=imgHeight+'px';
overflow='hidden';
}
var Img=C$('img');//图片
img_a.appendChild(Img);
Img.border='0';
Img.height=imgHeight;
Img.width=imgWidth;
Img.src=imgSrc[0];
Img.id='img_Id';
var o_img_div=C$('div');//标题框
img_div.appendChild(o_img_div);
o_img_div.id='o_img_div';
with(o_img_div.style){
height=titleHeight+'px';
lineHeight=titleHeight+'px';
width=imgWidth+'px';
background='#9eafc1';
position='relative';
bottom=0+'px';
overflow='hidden';
}
for(i=count;i>0;i--){
var img_button=C$('a');//数字按钮
img_div.appendChild(img_button);
img_button.id='img_button_'+i;
with(img_button.style){
position='relative';
display='block';
height=imgButtonHeight+'px';
lineHeight=imgButtonHeight+'px';
width=imgButtonWidth+'px';
textAlign='center';
background=imgButtonBg;
if (isIE()) {
styleFloat='right';
}else{
cssFloat='right';
}
marginRight='1px';
fontSize='12px';
color='#ffffff';
fontWeight='bold';
cursor='pointer';
zIndex=901;
bottom=titleHeight+imgButtonHeight+5+'px';
}
img_button.innerHTML=i;
}
var title_button=C$('a');//文字标题
o_img_div.appendChild(title_button);
title_button.id='title_button';
title_button.target='_blank';
with(title_button.style){
position='relative';
display='block';
height=imgButtonHeight+'px';
lineHeight=imgButtonHeight+'px';
width=imgWidth-15+'px';
textAlign='left';
textDecoration='none';
if (isIE()) {
styleFloat='right';
}else{
cssFloat='right';
}
marginRight='8px';
marginTop=Math.round((titleHeight-imgButtonHeight)/2)+5+'px';
fontSize='12px';
color='#000';
cursor='pointer';
overflow='hidden';
}
if(!showTitle){title_button.style.display='none'}
for(i=1;i<=count;i++){//按钮点击触发
$('img_button_'+i).onclick=function(){clearTimeout(imgPlay); play(this);}
}
this.play=function(position){//开始播放
if(typeof(position)!='undefined')num=parseInt(position.innerHTML)-1;
if(isIE()){//---IE----
$('img_Id').style.filter='revealTrans(Duration=1,Transition='+Math.round(Math.random()*23)+')';
$('img_Id').filters[0].apply();
$('img_Id').filters[0].play();
$('img_Id').src=imgSrc[num];
$('title_button').innerHTML=newsTi
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
