图片轮播

最新推荐文章于 2022-11-27 15:04:02 发布

jamm1986

最新推荐文章于 2022-11-27 15:04:02 发布

阅读量84

点赞数

文章标签： CSS J# Google XHTML HTML

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" />
<title>New Document</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css" rel="stylesheet">
#img_content{width:347px;height:230px;overflow:hidden;}
#img_inner{width:347px;height:230px;overflow:hidden;position:relative;background:url("http://image.et-china.com/common/bg_loading.gif") no-repeat center center;}
#img_content ul{margin:0;padding:0;list-style-type:none;overflow:hidden;}
#img_content .ul1{margin:0;padding:0;position:absolute;list-style-type:none;}
#img_content .ul1 a{cursor:pointer;}
#img_content .ul1 li{height:230px;}
#img_content .ul1 img{vertical-align:top;}
#img_content .ul2{position:absolute;right:2px;bottom:5px;z-index:2;height:21px;}
#img_content .ul2 li{float:left;width:15px;height:15px;margin:2px 3px;cursor:pointer;color:#f90;border:1px solid #f90;font-size:12px;text-align:center;background:#fff;}
#img_content .ul2 .current{width:19px;height:19px;margin:0 3px;font-size:16px;font-weight:bold;line-height:19px;background:#f90;color:#fff;border:1px solid #fff;}
/*图片轮转css结束*/

</style>
<script type="text/javascript" src="img.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload =function(){
var urlConfig = [["http://image.et-china.com/common/adpicTest1.jpg", "1","http://www.baidu.com"],
				["http://image.et-china.com/common/adpicTest2.jpg","2","http://www.google.com"],
				["http://image.et-china.com/common/adpicTest1.jpg","3","http://www.xunlei.com"]]
	imgScroll.setUrl(urlConfig);
	imgScroll.begin();	
}
//]]>
</script>
</head>
<body>
        <div id="img_content">
						<div id="img_inner">
						</div>
					</div>
</body>
</html>



var imgScroll = {
	time : null,
	currentIndex : 0, //目前的图片索引
	imgTotal : 0, //图片的个数
	autoMark : true,
	imgUrl : null, //图片的url
	obj : null, //容器的id或对象
	imghgt: 230, //图片的高度，即图片一次滚动的高度
	nowImg: 0,
	$$ : function(dom){
			return typeof dom == 'string' ? document.getElementById(dom) : dom;
		},
	band : function(obj){
		var _this = this;
		return function(){
			obj.apply(_this, arguments);
		}
	},
	setUrl : function(src){
		if(src){
			this.imgUrl = src;
			this.imgTotal = src.length;
		}
	},

	begin : function(){
		if(!this.imgUrl)
			return;
		var str = '<ul class="ul1" style="display:none;" id="imgKey"></ul><ul style="display:none;" class="ul2" id="imgWrap"></ul>';
		var inner = this.$$("img_inner");
		inner.innerHTML = str;
		for(var i = 0, len = this.imgUrl.length; i < len; i++){
			var li1 = document.createElement('li');
			var n = this.imgUrl[i];
			this.$$("imgKey").appendChild(li1);
			li1.innerHTML = '<a href="' + n[2] + '" title=' + n[1] + '><img border="0" id="bigImg' + i + '"/></a>';
			var li2 = document.createElement('li');
			li2.id = "bigLi" + i;
			li2.innerHTML = i + 1;
			this.$$("imgWrap").appendChild(li2);
			if(i > 0)	this.$$("bigImg" + i).src = n[0];
		}
		this.img0 = new Image();
		this.img0.src = this.imgUrl[0][0];
		if(this.img0.complete){
			this.callback();
			return;
		}
		this.img0.onload = this.band(this.callback);
	},

	callback : function(){
		this.$$("bigImg0").src = this.img0.src;
		this.$$("imgKey").style.display = '';
		this.$$("bigLi0").className = "current";
		this.$$("imgWrap").style.display = '';
		this.minhandle();
		this.handle();
		this.auto();
	},

	scroll : function(index){
		clearInterval(this.time);
		clearInterval(this.minTime);
		var obj1 = this.$$("bigLi" + this.currentIndex);
		var obj2 = this.$$("bigLi" + index);
		var $obj = this.$$("imgKey"), x, y, i=0;
		var cuI = this.currentIndex, imghgt = this.imghgt;
		var _this = this;
		this.minTime = window.setInterval(function(){
			x = imghgt * ((index - cuI) / 5*(++i) + cuI);
			$obj.style.top =  -x + 'px';
			if(i == 5){
				clearInterval(_this.minTime);
				obj1.className = "";
				obj2.className = "current";
				_this.currentIndex = index;
				if(imgScroll.autoMark)
					_this.auto();
			}
		} , 15);

	},

	auto : function(){
		clearInterval(this.time);
		this.time = setInterval(function(){
			imgScroll.scroll((imgScroll.currentIndex + 1) >= imgScroll.imgTotal ? 0 : imgScroll.currentIndex + 1);
		}, 3000)
	},

	handle : function(){
		this.$$("img_content").onmouseout = function(){
			imgScroll.autoMark = true;
			imgScroll.auto();
		};
		this.$$("img_content").onmouseover = function(){
			clearInterval(imgScroll.time);
		};
	},

	minhandle : function(){
		for(var j = 0; j < this.imgTotal; j++){
			this.$$("bigLi" + j).onclick = function(){
				imgScroll.autoMark = false;
				imgScroll.scroll(parseFloat(this.innerHTML) - 1);
			}
		}
	}
}