js图片轮换

最新推荐文章于 2022-02-25 23:02:56 发布

wsmh3333

最新推荐文章于 2022-02-25 23:02:56 发布

阅读量62

点赞数 1

分类专栏：备忘文章标签： C C++ C# J# IE

备忘专栏收录该内容

4 篇文章 0 订阅

订阅专栏


<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=newsTitle[num];
$('title_button').href=imgUrl[num];

for(j=1;j<=count;j++){
	$('img_button_'+j).style.backgroundColor=imgButtonBg;
	$('img_button_'+j).style.color='#666';
}
$('img_button_'+(num+1)).style.backgroundColor=imgButtonOverBg;
$('img_button_'+(num+1)).style.color='#fff';
}
else{//---其他浏览器---
$('img_Id').src=imgSrc[num];
$('title_button').innerHTML=newsTitle[num];
$('title_button').href=imgUrl[num];
for(j=1;j<=count;j++){
	$('img_button_'+j).style.backgroundColor=imgButtonBg;
	$('img_button_'+j).style.color='#666';
}
$('img_button_'+(num+1)).style.backgroundColor=imgButtonOverBg;
$('img_button_'+(num+1)).style.color='#fff';
}
$('title_button').title=$('title_button').innerHTML;
$('img_a').href=$('title_button').href;
num++;
num=num>=count?0:num;
imgPlay=setTimeout('play()',speed);
}
	$('title_button').onfocus=function(){this.blur();}
	$('title_button').onmouseover=function(){this.style.color='#f00';}
	$('title_button').onmouseout=function(){this.style.color='#000';}
	play();	
}

wsmh3333

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js图片轮换

[code="html"][/code][code="js"]window.load=img_switch('img_swicth',['3.jpg','2.jpg','5.jpg'],['http://www.baidu.com','http://www.faw','http://www.126.com'],['这里是标题第一个标题...
复制链接

扫一扫