`
吴英贵
  • 浏览: 7454 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
图片轮排效果的实现 图片轮播,css,javascript
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css" media="all">
.d1 {
	width: 1002px;
	height: 120px;
	overflow: hidden;
	border: #666666 2px solid;
	background-color: #000000;
	position: relative;
	overflow: hidden;
}

.loading {
	width: 443px;
	border: #666666 2px solid;
	background-color: #000000;
	color: #FFCC00;
	font-size: 12px;
	height: 179px;
	text-align: center;
	padding-top: 30px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.d2 {
	width: 100%;
	height: 120px;
	overflow: hidden;
}

.num_list {
	position: absolute;
	width: 80%;
	left: 0px;
	bottom: -1px;
	background-color: #000000;
	color: #FFFFFF;
	font-size: 12px;
	padding: 4px 0px;
	height: 20px;
	overflow: hidden;
}

.num_list span {
	display: inline-block;
	height: 16px;
	padding-left: 6px;
}

img {
	border: 0px;
}

ul {
	display: none;
}

.button {
	position: absolute;
	z-index: 1000;
	right: 200px;
	bottom: 2px;
	font-size: 13px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

.b1,.b2 {
	background-color: #666666;
	display: block;
	float: left;
	padding: 2px 6px;
	margin-right: 3px;
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
}

.b2 {
	color: #FFCC33;
	background-color: #FF6633;
}
</style>
		<script language="javascript" type="text/javascript">
/*
 power by: http://www.wxwdesign.cn
 */
//主函数
var s = function() {
	var interv = 5000; //切换间隔时间
	var interv2 = 10; //切换速速
	var opac1 = 10; //文字背景的透明度
	var source = "fade_focus"; //焦点轮换图片容器的id名称
	//获取对象
	function getTag(tag, obj) {
		if (obj == null) {
			return document.getElementsByTagName(tag)
		} else {
			return obj.getElementsByTagName(tag)
		}
	}
	function getid(id) {
		return document.getElementById(id)
	}
	;
	var opac = 0, j = 0, t = 63, num, scton = 0, timer, timer2, timer3;
	var id = getid(source);
	id.removeChild(getTag("div", id)[0]);
	var li = getTag("li", id);
	var div = document.createElement("div");
	var title = document.createElement("div");
	var span = document.createElement("span");
	var button = document.createElement("div");
	button.className = "button";
	for ( var i = 0; i < li.length; i++) {
		var a = document.createElement("a");
		a.innerHTML = i + 1;
		a.onclick = function() {
			clearTimeout(timer);
			clearTimeout(timer2);
			clearTimeout(timer3);
			j = parseInt(this.innerHTML) - 1;
			scton = 0;
			t = 63;
			opac = 0;
			fadeon();
		};
		a.className = "b1";
		a.onmouseover = function() {
			this.className = "b2"
		};
		a.onmouseout = function() {
			this.className = "b1";
			sc(j)
		};
		button.appendChild(a);
	}
	//控制图层透明度
	function alpha(obj, n) {
		if (document.all) {
			obj.style.filter = "alpha(opacity=" + n + ")";
		} else {
			obj.style.opacity = (n / 100);
		}
	}
	//控制焦点按钮
	function sc(n) {
		for ( var i = 0; i < li.length; i++) {
			button.childNodes[i].className = "b1"
		}
		;
		button.childNodes[n].className = "b2";
	}
	title.className = "num_list";
	title.appendChild(span);
	alpha(title, opac1);
	id.className = "d1";
	div.className = "d2";
	id.appendChild(div);
	id.appendChild(title);
	id.appendChild(button);
	//渐显
	var fadeon = function() {
		opac += 5;
		div.innerHTML = li[j].innerHTML;
		span.innerHTML = getTag("img", li[j])[0].alt;
		alpha(div, opac);
		if (scton == 0) {
			sc(j);
			num = -2;
			scrolltxt();
			scton = 1
		}
		;
		if (opac < 100) {
			timer = setTimeout(fadeon, interv2)
		} else {
			timer2 = setTimeout(fadeout, interv);
		}
		;
	}
	//渐隐
	var fadeout = function() {
		opac -= 5;
		div.innerHTML = li[j].innerHTML;
		alpha(div, opac);
		if (scton == 0) {
			num = 2;
			scrolltxt();
			scton = 1
		}
		;
		if (opac > 0) {
			timer = setTimeout(fadeout, interv2)
		} else {
			if (j < li.length - 1) {
				j++
			} else {
				j = 0
			}
			;
			fadeon()
		}
		;
	}
	//滚动文字
	var scrolltxt = function() {
		t += num;
		span.style.marginTop = t + "px";
		if (num < 0 && t > 3) {
			timer3 = setTimeout(scrolltxt, interv2)
		} else if (num > 0 && t < 62) {
			timer3 = setTimeout(scrolltxt, interv2)
		} else {
			scton = 0
		}
	};
	fadeon();
}
//初始化
window.onload = s;
</script>

		<meta id="viewport" name="viewport"
			content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>中国联通沃门户</title>
		<link rel="stylesheet" type="text/css"
			href="../css/site_new_index.css" />

		<script src="../js/sideAd.js" type="text/javascript">
</script>

		


		<script type="text/javascript" src="../js/scrollver.js">
</script>
		<script type="text/javascript" src="../js/jquery-1.4.2.js">
</script>
		<script type="text/JavaScript" language="JavaScript">
function logout() {
	var name = "iphone_cookieName";
	var name1 = "iphone_cookiePassword";
	var ThreeDays = 3 * 24 * 60 * 60 * 1000;
	var expDate = new Date();
	expDate.setTime(expDate.getTime() - 1000);
	document.cookie = name + "=v;expires=" + expDate.toGMTString()
			+ ";domain=.wo.com.cn;path=/;true";
	document.cookie = name1 + "=v;expires=" + expDate.toGMTString()
			+ ";domain=.wo.com.cn;path=/;true";
	var pageUrl = document.URL;
	window.location.href = "http://xz.wo.com.cn";
}
function out() {
	var name = "portal_user";
	var ThreeDays = 3 * 24 * 60 * 60 * 1000;
	var expDate = new Date();
	expDate.setTime(expDate.getTime() - 1000);
	document.cookie = name + "=v;expires=" + expDate.toGMTString()
			+ ";domain=.wo.com.cn;path=/;true";
	window.location.href = "http://xz.wo.com.cn";
}
</script>


		<style>
#wrap {
	width: 970px;
	height: 200px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0px 0px;
}

#wrap ul {
	width: 9999px;
}

#wrap ul li {
	float: left;
	width: 250px;
	margin-right: 0px;
	text-align: center
}

#wrap ul li p {
	height: 16px;
	line-height: 16px;
	overflow: hidden; *+
	margin-top: 0px;
	_margin-top: 0px;
}
</style>

	</head>
	<body>
		
		
				
					<div id="fade_focus">
						<div class="loading">
			
							<img src="../images/images/index_scrollAd01.jpg" width="1002px;" height="120px;"></img>
						</div>
						<ul>
							<li>
								<a href="http://gy.unisk.cn" target="_blank"><img
										src="../images/images/index_scrollAd01.jpg"></img> </a>
							</li>
							<li>
								<a href="http://gy.unisk.cn" target="_blank"><img
										src="../images/images/index_scrollAd02.jpg" width="1010px"></img>
								</a>
							</li>
						</ul>
					</div>
		

	</body>
</html>

Global site tag (gtag.js) - Google Analytics