简明现代魔法 -> JavaScript -> 兼容IE、Firefox等浏览器的 Javascript 图片切换

兼容IE、Firefox等浏览器的 Javascript 图片切换

2010-04-16

结合数据库信息的版本:

<?php
require_once('dbinfo.php'); 

mysql_select_db($database_connePaper, $connePaper);
$query_Banner = "SELECT * FROM table WHERE on_show = 1 AND type_id=1 ORDER BY rank ASC";
$Banner = mysql_query($query_Banner, $connePaper) or die(mysql_error());
$row_Banner = mysql_fetch_assoc($Banner);
?>


<?php 
$i=0;
do { 
	$i++;
	if($i==1)
	{
		$display="yes";
	} 
	else 
	{
		$display="none";
	}
	$link[$i] = $row_Banner['link'];
	//echo '$link['.$i.'] 的值为'.$link[$i];
	//echo $row_Banner['link'].'<br />';
	$img[$i] = $row_Banner['path'];
	//echo '$img['.$i.'] 的值为'.$img[$i];
	//echo $row_Banner['path'].'<br />';
} 
while ($row_Banner = mysql_fetch_assoc($Banner)); ?>

<?php
mysql_free_result($Banner);
?>

<script>
var widths = 200;
var heights = 200;
var counts = 8;
img1=new Image ();img1.src='../banneradv/<?=$img[1]?>'; 
img2=new Image ();img2.src='../banneradv/<?=$img[2]?>'; 
img3=new Image ();img3.src='../banneradv/<?=$img[3]?>'; 
img4=new Image ();img4.src='../banneradv/<?=$img[4]?>'; 
img5=new Image ();img5.src='../banneradv/<?=$img[5]?>'; 
img6=new Image ();img6.src='../banneradv/<?=$img[6]?>'; 
img7=new Image ();img7.src='../banneradv/<?=$img[7]?>'; 
img8=new Image ();img8.src='../banneradv/<?=$img[8]?>'; 
url1=new Image ();url1.src='<?=$link[1]?>'; 
url2=new Image ();url2.src='<?=$link[2]?>'; 
url3=new Image ();url3.src='<?=$link[3]?>'; 
url4=new Image ();url4.src='<?=$link[4]?>'; 
url5=new Image ();url5.src='<?=$link[5]?>'; 
url6=new Image ();url6.src='<?=$link[6]?>'; 
url7=new Image ();url6.src='<?=$link[7]?>'; 
url8=new Image ();url6.src='<?=$link[8]?>'; 
var nn = 1;
var key = 0;
function change_img()
{
	if(key==0)
	{
		key=1;
	}
	else if(document.all)
	{
		document.getElementById("pic").filters[0].Apply();
		document.getElementById("pic").filters[0].Play(duration=1);
	}
	eval('document.getElementById("pic").src=img'+nn+'.src');
	eval('document.getElementById("url").href=url'+nn+'.src');
	/*
	for (var i=1;i <=counts;i++)
	{
		document.getElementById("xxjdjj"+i).className='axx';
	}
	document.getElementById("xxjdjj"+nn).className='bxx';
	*/
	nn++;
	if(nn>counts)
	{
		nn=1;
	}
	tt=setTimeout('change_img()',4000);
}
	
function changeimg(n)
{
	nn=n;window.clearInterval(tt);
	change_img();
}

/*
document.write(' <style>');
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write(' </style>');
*/
document.write(' <div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
document.write(' <div> <a id="url" target="_blank"> <img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /> </a> </div>');
//document.write(' <div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background:#888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');

/*
for(var i=1; i <counts+1; i++)
{
	document.write(' <a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+' </a>');
}
*/
document.write(' </div> </div>');
change_img();
</script>

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>

普通的 JavaScript 版本:

<script>
var widths = 300;
var heights = 164;
var counts = 6;
img1=new Image ();img1.src='images/1.jpg'; 
img2=new Image ();img2.src='images/2.jpg'; 
img3=new Image ();img3.src='images/3.jpg'; 
img4=new Image ();img4.src='images/1.jpg'; 
img5=new Image ();img5.src='images/2.jpg'; 
img6=new Image ();img6.src='images/3.jpg'; 
url1=new Image ();url1.src='http://www.yy152.com'; 
url2=new Image ();url2.src='http://www.yy152.com'; 
url3=new Image ();url3.src='http://www.yy152.com'; 
url4=new Image ();url4.src='http://www.yy152.com'; 
url5=new Image ();url5.src='http://www.yy152.com'; 
url6=new Image ();url6.src='http://www.yy152.com'; 
var nn = 1;
var key = 0;
function change_img()
{
	if(key==0)
	{
		key=1;
	}
	else if(document.all)
	{
		document.getElementById("pic").filters[0].Apply();
		document.getElementById("pic").filters[0].Play(duration=1);
	}
	eval('document.getElementById("pic").src=img'+nn+'.src');
	eval('document.getElementById("url").href=url'+nn+'.src');
	/*
	for (var i=1;i <=counts;i++)
	{
		document.getElementById("xxjdjj"+i).className='axx';
	}
	document.getElementById("xxjdjj"+nn).className='bxx';
	*/
	nn++;
	if(nn>counts)
	{
		nn=1;
	}
	tt=setTimeout('change_img()',4000);
}
	
function changeimg(n)
{
	nn=n;window.clearInterval(tt);
	change_img();
}

/*
document.write(' <style>');
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write(' </style>');
*/
document.write(' <div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
document.write(' <div> <a id="url"> <img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /> </a> </div>');
//document.write(' <div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background:#888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');

/*
for(var i=1; i <counts+1; i++)
{
	document.write(' <a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+' </a>');
}
*/
document.write(' </div> </div>');
change_img();
</script>

把注释去掉可以显示图片的序号,点击序号到达图片。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们