返回首页

温馨提示：本站文章标题使用的字体是《微软雅黑》点击下载这个字体.

顶一下

1 次

焦点Banner效果滚动实现效果

来源：本站原创编辑：佚名时间：2008年11月3日浏览：

点击下载焦点Banner效果滚动实现效果

<!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=utf-8" />
<title>站长素材-专注于网页素材下载-www.web265.com</title>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#0287CA; text-decoration:none; }
	a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
legend { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }
html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/

/* iBanner style */
#ibanner { position:relative; width:650px; height:250px; overflow:hidden; margin:20px 0 20px 300px; }
	#ibanner_pic {}
		#ibanner_pic a { position:absolute; top:0; display:block; width:650px; height:250px; overflow:hidden; }
	#ibanner_btn { position:absolute; z-index:9999; right:5px; bottom:5px; font-weight:700; font-family:Arial; }
		#ibanner_btn span { display:block; float:left; margin-left:4px; padding:0 5px; background:#000; cursor:pointer; }
		#ibanner_btn .normal { height:20px; margin-top:8px; border:1px solid #999; color:#999; font-size:16px; line-height:20px; }
		#ibanner_btn .current { height:28px; border:1px solid #FF5300; color:#FF5300; font-size:28px; line-height:28px; }
</style>

<script type="text/javascript">
function $(id) { return document.getElementById(id); }

function classNormal() {
	var btnList = $('ibanner_btn').getElementsByTagName('span');
	for (var i=0; i<btnList.length; i++){
		btnList[i].className='normal';
	}
}

function picZ() {
	var picList = $('ibanner_pic').getElementsByTagName('a');
	for (var i=0; i<picList.length; i++){
		picList[i].style.zIndex='1';
	}
}

setInterval('autoBanner()', 5000);
function autoBanner() {
	if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')||autoKey) return;
	var btnList = $('ibanner_btn').getElementsByTagName('span');
	var picList = $('ibanner_pic').getElementsByTagName('a');
	if (picList.length==1) return;
	for(var i=0; i<btnList.length; i++) {
		if (btnList[i].className == 'current') {
			var currentNum = i;
		}
	}
	if (currentNum==(picList.length-1) ){
		classNormal();
		picZ();
		btnList[0].className='current';
		picList[currentNum].style.zIndex='2';
		picList[0].style.zIndex='3';
		picList[0].style.left='650px';
		moveElement('picLi_0',0,0,10);
	} else {
		classNormal();
		picZ();
		var nextNum = currentNum+1;
		btnList[nextNum].className='current';
		picList[currentNum].style.zIndex='2';
		picList[nextNum].style.zIndex='3';
		picList[nextNum].style.left='650px';
		moveElement('picLi_'+nextNum,0,0,10);
	}
}

addLoadEvent(addBtn);
addLoadEvent(iBanner);
</script>
</head>

</body>
</html>本代码由<a href="http://www.web265.com" target="_blank">站长素材网(http://www.web265.com)</a>整理发布

运行代码
复制代码
另存代码
收藏本页

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇：可自定义数量、默认级别的星星打分

下一篇：百度POPUP效果

赞助商友情链接

站长常用工具

更多

返回首页

焦点Banner效果滚动实现效果

赞助商友情链接

站长常用工具

相关文章