js模拟flash几张图片过渡滑动切换特效

2016-12-17 网页编程网 网页编程网

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>非常漂亮的图片滑动显示效果</title>
<style type="text/css">
* {margin:0;padding:0;}
body {margin:5px auto;background:#f0f0f0;}
img {margin:0;border:0;padding:0;}
#net {position:relative;margin:0;width:270px;height:185px;overflow:hidden;}
#net ul {position:absolute;top:0;left:0;list-style-type:none;z-index:1;}
#net li {display:block;position:absolute;top:0;margin:0;padding:0;overflow:hidden;}
</style>
</head>
<body>
<div id="net"></div>
<div id="debug"></div>
<script>
//<[CDATA[
var net = document.getElementById('net');
var speed1 = 50, speed2 = 2000;
var iA = 0, iB = 0, iC = 0;
var bD = [];
var aImg = ['image/banner1.jpg','/ad/2.gif','/ad/3.gif','/ad/4.gif','/ad/5.gif'	];
var aLink = ['http://#','http://#','http://#','http://#','http://#','http://#'];
var iImgWidth = 400, iImgHeight = 300;
var iDivWidth = iImgWidth/10;
net.style.width = iImgWidth + 'px';
net.style.height = iImgHeight + 'px';
var oImg = [];
oImg[0] = new Image();
oImg[0].src = aImg[0];
oImg[1] = new Image();
oImg[1].src = aImg[1];
window.onload = function() {
	net_create();
}
function net_create() {
	if (aImg[iA+2] && !bD[iA+2]){
		oImg[iA+2] = new Image();
		oImg[iA+2].src = aImg[iA+2];
	}
	if (!bD[iA]) {
		var oUl = document.createElement('ul');
		/*oUl.style.position = 'absolute';
		oUl.style.top = '0';
		oUl.style.left = '0';*/
		oUl.style.width = iImgWidth + 'px';
		oUl.style.height = iImgHeight + 'px';
		var oUlLi = document.createElement('li');
		oUlLi.style.right = '0';
		oUlLi.style.width = iDivWidth +'px';
		oUlLi.style.height = iImgHeight + 'px';
		var oLiA = document.createElement('a');
		oLiA.href = aLink[iA];
		var oLiImg = document.createElement('img');
		oLiImg.src = oImg[iA].src;
		oLiImg.style.marginLeft = -9*iDivWidth + 'px';
		oLiA.appendChild(oLiImg);
		oUlLi.appendChild(oLiA);
		oUl.appendChild(oUlLi);
		for (var i=0; i<10; i++) {
			oUlLi = document.createElement('li');
			oUlLi.style.right = i*iDivWidth + 'px';
			oUlLi.style.width = 1.5*iDivWidth +'px';
			oUlLi.style.height = iImgHeight + 'px';
			//oUlLi.style.background = color[i];
			oLiA = document.createElement('a');
			oLiA.href = aLink[iA];
			oLiImg = document.createElement('img');
			oLiImg.src = oImg[iA].src;
			oLiImg.style.marginLeft = -9*iDivWidth + 'px';
			oLiA.appendChild(oLiImg);
			oUlLi.appendChild(oLiA);
			//oUlLi.appendChild(document.createTextNode(i));
			oUl.appendChild(oUlLi);
		}
		net.appendChild(oUl);
		bD[iA] = !bD[iA];
	}
	net_show();
	//document.getElementById('debug').innerText = net.innerHTML;
}
function net_show(){
	var oUl = net.getElementsByTagName('ul');
	var oLi = oUl[iA].getElementsByTagName('li');
	var oImgs = oUl[iA].getElementsByTagName('img');
	oUl[iA].style.zIndex = ++iC;
	for (var i=1; i<11; i++){
		oImgs[i].style.marginLeft = -9*iDivWidth + 'px';
		oImgs[i].style.visibility = 'hidden';
	}
	net_move();
}
function net_move(){
	var oUl = net.getElementsByTagName('ul');
	var oLi = oUl[iA].getElementsByTagName('li');
	var oImgs = oUl[iA].getElementsByTagName('img');
	if (iB++<10)
		oImgs[iB].style.visibility = 'visible';
	for (var i=1; i<oImgs.length; i++) {
		var iBgpx = parseInt(oImgs[i].style.marginLeft);
		if (iBgpx<(i+0.5)*iDivWidth-iImgWidth) {
			var iMovePx = Math.floor((iImgWidth-(i+0.5)*iDivWidth+iBgpx)/15);
			oImgs[i].style.marginLeft = iBgpx - iMovePx + 'px';
		} else {
			oImgs[i].style.marginLeft = ((i+0.5)*iDivWidth-iImgWidth) + 'px';
		}
	}
	//document.getElementById('debug').innerText = net.innerHTML;
	if (parseInt(oImgs[10].style.marginLeft)<0.5*iDivWidth) {
		setTimeout('net_move()',speed1);
	} else {
		iB = 0;
		//document.getElementById('debug').innerText = oUl[iA].style.display;
		iA = ++iA==aImg.length ? 0 : iA;
		if (bD[iA]) {
			setTimeout('net_show()',speed2);
		} else {
			setTimeout('net_create()',speed2);
		}
	}
}
//]]>
</script>
</body>
</html>

阅读原文

阅读 4706

123 显示电脑版