4屏平滑滚动幻灯片效果轮播滚动广告js代码

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

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

以下是 4屏平滑滚动幻灯片效果轮播滚动广告js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为4屏平滑滚动幻灯片效果，属于站长常用代码" />
<title>4屏平滑滚动幻灯片效果</title>
<LINK href="css/base.css" type=text/css rel=stylesheet>
<SCRIPT language=javascript type=text/javascript>
    var thumbCount = 4;
    document.getElementById('zoom').style.left = -514 + 'px';
    document.getElementById("zoom1").style.visibility = "hidden";
    document.getElementById("zoom2").style.visibility = "hidden";
    document.getElementById("zoom3").style.visibility = "hidden";
</SCRIPT>
<SCRIPT src="js/base.js" type=text/javascript></SCRIPT>
</head>
<body style="text-align:center">

<DIV id=fbMaster>
<DL id=content>
  <DT><STRONG><SPAN id=zoom>
  <A href="#" target="_blank"><IMG id=zoom0 height=432 alt="" src="images/ss_lrg_pk0.jpg" width=514></a>
  <A href="#" target="_blank"><IMG id=zoom1 height=432 alt="" src="images/ss_lrg_pk1.jpg" width=514></a>
  <A href="#" target="_blank"><IMG id=zoom2 height=432 alt="" src="images/ss_lrg_pk2.jpg" width=514></a>
  <A href="#" target="_blank"><IMG id=zoom3 height=432 alt="" src="images/ss_lrg_pk3.jpg" width=514></a>
  </SPAN> </STRONG></DT>
  <DD><A title="内容"><IMG id=thumb0 height=106 alt="" src="images/ss_sml_pk0.jpg" width=106></A></DD>
  <DD><A title="内容"><IMG id=thumb1 height=106 alt="" src="images/ss_sml_pk1.jpg" width=106></A></DD>
  <DD><A title="内容"><IMG id=thumb2 height=106 alt="" src="images/ss_sml_pk2.jpg" width=106></A></DD>
  <DD class=last><A title="内容"><IMG id=thumb3 height=106 alt="" src="images/ss_sml_pk3.jpg" width=106></A></DD>
  </DL>
</DIV>
</body>
</html>

JS代码(base.js):

//--------------------------------------------------------------------------//Image onload cycle fade v0.01 Kirk Bentley//--------------------------------------------------------------------------//Copyright 2005 Fyrebase.com////Original code:Richard Rutter//Copyright 2004 Clagnut.com//--------------------------------------------------------------------------var imgCycleCount= 0;
	function cycleFadeFn(imgTotal,idPrefix,endFn,arg0,arg1,arg2,arg3){
	imgCycleCount < imgTotal ? initImage(idPrefix + imgCycleCount,imgTotal,idPrefix):null;
}
function initImage(imageId,imgTotal,idPrefix){
	image= document.getElementById(imageId);
	setOpacity(image,0);
	image.style.visibility= 'visible';
	fadeIn(imageId,0,imgTotal,idPrefix);
}
function setOpacity(obj,opacity){
	opacity= (opacity == 100) ? 99.999:opacity;
	obj.style.filter= "alpha(opacity:" + opacity + ")";
	obj.style.KHTMLOpacity= opacity / 100;
	obj.style.MozOpacity= opacity / 100;
	obj.style.opacity= opacity / 100;
}
function fadeIn(objId,opacity,imgTotal,idPrefix){
	if (document.getElementById){
	obj = document.getElementById(objId);
	if (opacity <= 100){
	setOpacity(obj,opacity);
	opacity+= 10;
	window.setTimeout("fadeIn('" + objId + "'," + opacity + "," + imgTotal + ",'" + idPrefix + "')",50);
}
else{
	obj.parentNode.parentNode.style.background= '#222';
	imgCycleCount ++;
	cycleFadeFn(imgTotal,idPrefix);
}
}
}
//--------------------------------------------------------------------------//Movement Core v0.02 Kirk Bentley//--------------------------------------------------------------------------//Copyright 2005 Fyrebase.com//--------------------------------------------------------------------------var moveAr = new Array();
	//<-- Create storage for all animated objects.moveFn= function(el,speed,xPos,yPos,endFn,arg0){
	!endFn ? endFn = null:'';
	//alert(arg0);
	typeof(el) == 'string' ? el = document.getElementById(el):'';
	//--> Store currently animated object.if (el.moveIndex == null){
	el.moveIndex = moveAr.length;
}
moveAr[el.moveIndex]= el;
	//--> Convert speed scale to decimal.speed= '0.' + speed;
	//--> Call recal function.el.moveTimer ? clearTimeout(el.moveTimer):'';
	window.setTimeout('moveRecalFn(' + el.moveIndex + ',' + speed + ',' + xPos + ',' + yPos + ',' + endFn + ',' + arg0 + ')',0);
}
moveRecalFn= function(moveIndex,speed,xPos,yPos,endFn,arg0){
	el= moveAr[moveIndex];
	floatDisX= Math.round(xPos - parseInt(el.offsetLeft));
	(parseInt(el.offsetLeft) < xPos) ? floatVelX = Math.ceil(floatDisX * speed):floatVelX = Math.floor(floatDisX * speed);
	el.style.left= Math.ceil(parseInt(el.offsetLeft) + floatVelX) + 'px';
	floatDisY= Math.round(yPos - parseInt(el.offsetTop));
	(parseInt(el.offsetTop) < yPos) ? floatVelY = Math.ceil(floatDisY * speed):floatVelY = Math.floor(floatDisY * speed);
	el.style.top= Math.ceil(parseInt(el.offsetTop) + floatVelY) + 'px';
	el.moveTimer= window.setTimeout('moveRecalFn(' + el.moveIndex + ',' + speed + ',' + xPos + ',' + yPos + ',' + endFn + ',' + arg0 + ')',40);
	if(floatDisX == 0 && floatDisY == 0){
	clearTimeout(el.moveTimer);
	el.moveTimer= null;
	endFn ? endFn(arg0):'';
	//alert(arg0);
}
}
getThumbsFn = function(){
	var img= document.getElementsByTagName('img');
	var zoom= document.getElementById('zoom');
	var y= 0;
	for(var x = 0;
	x < img.length;
	x++){
	if(img[x].id && img[x].id.indexOf('zoom') != 0){
	img[x].num= 0 - (432 * y);
	y++;
	img[x].parentNode.onclick = function(){
	moveFn('zoom',2,0,this.firstChild.num,null);
	showAllFn(y)}
}
}
}
showAllFn= function(tt){
	for(var x = 0;
	x < tt;
	x++){
	var zoomItem= document.getElementById('zoom' + x);
	zoomItem.style.visibility= 'visible';
}
}
window.onload= function(){
	cycleFadeFn(thumbCount,'thumb');
	getThumbsFn();
	var zLast= document.getElementById('zoom' + (thumbCount - 1));
	zLast.setAttribute('onload',moveFn('zoom',2,0,0,showAllFn,thumbCount));
}

CSS代码(base.css):

BODY{PADDING-RIGHT:0px;PADDING-LEFT:0px;BACKGROUND:#151515;PADDING-BOTTOM:0px;MARGIN:0px auto;COLOR:#fff;PADDING-TOP:0px;POSITION:relative;TEXT-ALIGN:center;font-size:12px;}
IMG{BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px}
A{font-size:12px;COLOR:#fff;}
#fbMaster{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:5px;MARGIN:0px auto;WIDTH:520px;PADDING-TOP:5px;POSITION:relative;TEXT-ALIGN:left}
#content{PADDING-RIGHT:0px;PADDING-LEFT:0px;FLOAT:left;PADDING-BOTTOM:0px;WIDTH:535px;PADDING-TOP:0px}
#content DT{PADDING-RIGHT:10px;PADDING-LEFT:10px;BACKGROUND:url(images/bg_loading.gif) #222 no-repeat 50% 50%;PADDING-BOTTOM:10px;MARGIN:0px 0px 10px;PADDING-TOP:10px}
#content DT STRONG{DISPLAY:block;OVERFLOW:hidden;WIDTH:515px;POSITION:relative;HEIGHT:430px}
#content DT STRONG SPAN{POSITION:absolute;TOP:0px}
#content DT STRONG SPAN IMG{FLOAT:left}
#content DD{PADDING-RIGHT:10px;PADDING-LEFT:10px;BACKGROUND:url(images/bg_loading.gif) #222 no-repeat 50% 50%;FLOAT:left;PADDING-BOTTOM:10px;MARGIN:0px 10px 0px 0px;PADDING-TOP:10px;POSITION:relative}
#content DD.last{MARGIN:0px}
#content DD A{CURSOR:pointer;opacity:0.99}
#content DD A:hover{opacity:0.75}

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