大图JS轮换代码轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是大图JS轮换代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为大图JS轮换代码" />
<title>大图JS轮换代码</title>
</head>
<body><div align="center">
<script>
var fadeimages = new Array;
var linkarr = new Array;
var numimg = new Array;

	fadeimages[0] = 'images/01.jpg';
	linkarr[0] = '#';
	numimg[0] = 'images/main_rollover1.gif';

	fadeimages[1] = 'images/02.jpg';
	linkarr[1] = '#';
	numimg[1] = 'images/main_rollover1.gif';

	fadeimages[2] = 'images/03.jpg';
	linkarr[2] = '#';
	numimg[2] = 'images/main_rollover1.gif';


var cliImg = '';
var cliImgSrc = '';
var n = Math.round(Math.random() * 10);
var interval = 4000;
var setTimeId = '';

function rotateStop()
{
	clearTimeout(setTimeId);
}

function rotateStart()
{
	rotate();
}

function chki(ci, no)
{
	var pImg = document.all.RollImg;
	var pUrl = document.all.RollUrl;

	if(cliImg == '') {
		cliImg = ci;
		cliImgSrc = ci.src;
		ci.src = numimg[no];
		n=no;
		pImg.src = fadeimages[no];
		pUrl.href = linkarr[no];		
	} else if(cliImg != ci) {
		cliImg.src = cliImgSrc;
		cliImg = ci;
		cliImgSrc = ci.src;
		ci.src = numimg[no];
		n=no;
		pImg.src = fadeimages[no];
		pUrl.href = linkarr[no];		
	}
}

function rotate()
{
	n = (n >= 2) ? 0 : n+1;
	setimgurl();
	setTimeId=setTimeout("rotate()",interval);
}

function setimgurl()
{
	var ci = eval('document.all.num_img'+n);

	document.all.RollImg.filters.blendTrans.apply();
	document.all.RollUrl.href=linkarr[n];
	document.all.RollImg.src=fadeimages[n];
	document.all.RollImg.filters.blendTrans.play();
	
	if(cliImg == '') {
		cliImg = ci;
		cliImgSrc = ci.src;
		ci.src = numimg[n];
	} else if(cliImg != ci) {
		cliImg.src = cliImgSrc;
		cliImg = ci;
		cliImgSrc = ci.src;
		ci.src = numimg[n];
	}
}
</script>
 <TABLE width=389 align="center" cellPadding=0 cellSpacing=0>
              <TR>
                <TD align=center width=386 bgColor=#dd0103 colSpan=4 
                  height=457><a target=_blank onFocus=this.blur() 
                  href="#" 
                  name=RollUrl><img style="FILTER: blendTrans(duration=1)" 
                  height=447 src="images/02.jpg" width=376 border=0 
                  name=RollImg></a></TD>
              </TR>
              <TR>
                <TD width=386 colSpan=4 height=1></TD></TR>
              <TR>
                <TD width=248 height="58" align=center bgColor=#DD0103>
                <P class="STYLE1">可以根据自己需要调节啦~~</P></TD>
                <TD width=46 height="58" align=right bgcolor="#DD0103"><IMG style="CURSOR: hand" 
                  onclick="chki(this, 0);" height=45 
                  src="images/main_s1.jpg" width=45 align=absMiddle 
                  border=0 name=num_img0> </TD>
                <TD width=46 height="58" align=right bgcolor="#DD0103"><IMG style="CURSOR: hand" 
                  onclick="chki(this, 1);" height=45 
                  src="images/main_s2.jpg" width=45 align=absMiddle 
                  border=0 name=num_img1> </TD>
                <TD width=46 height="58" align=right bgcolor="#DD0103"><IMG style="CURSOR: hand" 
                  onclick="chki(this, 2);" height=45 
                  src="images/main_s3.jpg" width=45 align=absMiddle 
                  border=0 name=num_img2></TD>
            </TR></TABLE>
 <p>
<script language=JavaScript>
rotateStart();
</script>
</div>
</body></html>

附件:下载该文件资源,减少时间成本(增值服务)