<!DOCTYPE html>
<!-- saved from url=(0023)http://awdc.aliyun.com/ -->
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=1024">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
		<title>AWDC - 阿里云开发者大会</title>


		<link rel="stylesheet" href="./file/overview.css" type="text/css">

		<link rel="stylesheet" href="./file/index_2.css" type="text/css">
		<link rel="stylesheet" href="./file/index_3.css" type="text/css">

		<style>
			ul {
				padding: 0;
			}
			img {
				opacity: 0.5;
				filter: Alpha(Opacity=50);
			}
			#index_3 li {
				cursor: default;
			}
			#index_3 {
				position: relative;
			}
			#index_3 .owl-controls {
				position: absolute;
				bottom: 20px;
				margin-top: 0;
				width: 100%;
			}
			#index_3 .owl-dots {
				display: inline-block
			}
			.owl-stage {
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
		<script src="startmove.js"></script>
	</head>

	<body class="overview strength" id="overview">


		<section id="smart" class="slide page3 ac-responsive">

			<ul id="index_3" class="owl-carousel owl-theme owl-loaded">


				<div class="owl-stage-outer" style="padding-left: 0px; padding-right: 0px;">
					<div class="owl-stage">
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1EK1qGXXXXXXDXFXXDMAdYFXX-512-1440.jpg" id="background" alt="章文嵩">
								<h1>章文嵩</h1>
								<h2>阿里云 高级研究员</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1RymqGXXXXXcAXpXXYoMdYFXX-512-1439.jpg" id="background" alt="蔡浩宇">
								<h1>蔡浩宇</h1>
								<h2>米哈游CEO兼《崩坏学园2》制作人</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1K2euGXXXXXcFXXXXYoMdYFXX-512-1439.jpg" id="background" alt="Peter">
								<h1>Peter</h1>
								<h2>“愤怒的小鸟”（Rovio）CMO</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1PYCqGXXXXXanXFXXDMAdYFXX-512-1440.jpg" id="background" alt="樊振华">
								<h1>樊振华</h1>
								<h2>天弘基金创新支持部总经理</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1_ByrGXXXXXbEXpXXDMAdYFXX-512-1440.jpg" id="background" alt="徐敏">
								<h1>徐敏</h1>
								<h2>杭州安存网络科技有限公司 CEO</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1zqZpFVXXXXX0XFXXDMAdYFXX-512-1440.jpg" id="background" alt="王坚">
								<h1>王坚</h1>
								<h2>阿里巴巴集团CTO</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1OogrFVXXXXXZXXXXDMAdYFXX-512-1440.jpg" id="background" alt="王文彬">
								<h1>王文彬</h1>
								<h2>阿里云计算公司总裁</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1t2csFVXXXXXLXXXXDMAdYFXX-512-1440.jpg" id="background" alt="陈宇红">
								<h1>陈宇红</h1>
								<h2>中软国际有限公司董事长</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1SdonFVXXXXccXpXXDMAdYFXX-512-1440.jpg" id="background" alt="章苒">
								<h1>章苒</h1>
								<h2>新华社浙江分社记者对外采访室主任</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1sGhRFVXXXXa_XFXXDMAdYFXX-512-1440.jpg" id="background" alt="吕钢锋">
								<h1>吕钢锋</h1>
								<h2>杭州云栖小镇管委会主任</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1CUo3FVXXXXaLXpXXDMAdYFXX-512-1440.jpg" id="background" alt="陈向明">
								<h1>陈向明</h1>
								<h2>浙江银杏谷基金总裁</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB15F30FVXXXXbvXFXXYoMdYFXX-512-1439.jpg" id="background" alt="刘江">
								<h1>刘江</h1>
								<h2>中国软件开发联盟CSDN总编</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1sKIUFVXXXXXFXVXXDMAdYFXX-512-1440.jpg" id="background" alt="杜勇">
								<h1>杜勇</h1>
								<h2>博客园创始人</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1r6k5FVXXXXbwXpXXDMAdYFXX-512-1440.jpg" id="background" alt="蒋凡">
								<h1>蒋凡</h1>
								<h2>友盟创始人</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1GNEYFVXXXXXWXVXXDMAdYFXX-512-1440.jpg" id="background" alt="肖榕">
								<h1>肖榕</h1>
								<h2>浙江协同数据系统有限公司总经理</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1xt5lGXXXXXXoXVXXYoMdYFXX-512-1439.jpg" id="background" alt="余佳文">
								<h1>余佳文</h1>
								<h2>周末网络科技有限公司 CEO</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB13XOxGXXXXXa5XXXXDMAdYFXX-512-1440.jpg" id="background" alt="喻思成">
								<h1>喻思成</h1>
								<h2>阿里云 副总裁</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1UEuuGXXXXXcaXFXXDMAdYFXX-512-1440.jpg" id="background" alt="K.Guru Gowrappan">
								<h1>K.Guru Gowrappan</h1>
								<h2>Quixey COO</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1_UqqGXXXXXcsXpXXYoMdYFXX-512-1439.jpg" id="background" alt="陈广胜">
								<h1>陈广胜</h1>
								<h2>浙江省政府副秘书长</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB12dioGXXXXXcrXFXXYoMdYFXX-512-1439.jpg" id="background" alt="马宁宇">
								<h1>马宁宇</h1>
								<h2>贵州经济和信息化委员会 常务副主任</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1EK1qGXXXXXXDXFXXDMAdYFXX-512-1440.jpg" id="background" alt="章文嵩">
								<h1>章文嵩</h1>
								<h2>阿里云 高级研究员</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1RymqGXXXXXcAXpXXYoMdYFXX-512-1439.jpg" id="background" alt="蔡浩宇">
								<h1>蔡浩宇</h1>
								<h2>米哈游CEO兼《崩坏学园2》制作人</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1K2euGXXXXXcFXXXXYoMdYFXX-512-1439.jpg" id="background" alt="Peter">
								<h1>Peter</h1>
								<h2>“愤怒的小鸟”（Rovio）CMO</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1PYCqGXXXXXanXFXXDMAdYFXX-512-1440.jpg" id="background" alt="樊振华">
								<h1>樊振华</h1>
								<h2>天弘基金创新支持部总经理</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1_ByrGXXXXXbEXpXXDMAdYFXX-512-1440.jpg" id="background" alt="徐敏">
								<h1>徐敏</h1>
								<h2>杭州安存网络科技有限公司 CEO</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1zqZpFVXXXXX0XFXXDMAdYFXX-512-1440.jpg" id="background" alt="王坚">
								<h1>王坚</h1>
								<h2>阿里巴巴集团CTO</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1OogrFVXXXXXZXXXXDMAdYFXX-512-1440.jpg" id="background" alt="王文彬">
								<h1>王文彬</h1>
								<h2>阿里云计算公司总裁</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1t2csFVXXXXXLXXXXDMAdYFXX-512-1440.jpg" id="background" alt="陈宇红">
								<h1>陈宇红</h1>
								<h2>中软国际有限公司董事长</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1SdonFVXXXXccXpXXDMAdYFXX-512-1440.jpg" id="background" alt="章苒">
								<h1>章苒</h1>
								<h2>新华社浙江分社记者对外采访室主任</h2>
							</li>
						</div>
						<div class="owl-item" style="width: 273.2px; margin-right: 0px;">
							<li>
								<img src="./file/TB1sGhRFVXXXXa_XFXXDMAdYFXX-512-1440.jpg" id="background" alt="吕钢锋">
								<h1>吕钢锋</h1>
								<h2>杭州云栖小镇管委会主任</h2>
							</li>
						</div>
					</div>
				</div>
			</ul>

			<script>
				var div1 = document.getElementById('index_3');
				var timer = null;
				var list = getEleByClass('owl-stage')[0];
				var items = getEleByClass('owl-item');
				var len = items.length;
				var itemW = '273';

				
				
				
				setWith();
		        function setWith() {
		        	list.style.width = itemW * items.length + 'px';
		        }
		        moveItem()
				function moveItem() {
					clearInterval(timer)
					timer = setInterval('dragMovePre(1)', 5000);
				}
				
				drag(list)
		        function drag(obj){
		            obj.onmousedown = function(e){
		            	
		            	clearInterval(timer);
		            	
		                var e = e || event;
		                var startX = e.clientX - obj.offsetLeft;
						var moveIndex = 0;
						var flag = true;
						
		                obj.onmousemove = function(e){
		                    e = e || event;
		                    var x = e.clientX - startX;
		                    obj.style.left = x+ 'px';
		               		
		                }
		                obj.onmouseup = function(){
		                	var e = e || event;
		                	var target = e.target || e.srcElement;
		                    obj.onmousemove = null;
		                    obj.onmouseup = null;
		                    //图片超过1/2则移除，否则不变，可以放到onmouseup下，
		                    moveIndex = Math.ceil((Math.abs(obj.offsetLeft) - itemW / 2) /itemW) - moveIndex;
		                    if(obj.offsetLeft < 0) {
		                    	dragMovePre(moveIndex);	    
		                    }else {
		                    	startMove(list,{left:0});
		                    }
		                	moveItem();            	
		                }
		                return false;
		            }
		        }
				
				//向前移动
				function dragMovePre(num) {
					for(var i = 0; i < num; i++) {
							var curItem = items[i].cloneNode(true);
							list.appendChild(curItem);
						}
						startMove(list,{left:-itemW * num},function(){
							for(var i = 0;i < num; i++) {
								list.removeChild(items[0]);
								list.style.left = 0;
							}
						});
				}
				
				//向前移动
				function dragMoveNext(num) {
					for(var i = num-1,j=0 ;i >= 0 ; i--) {
						var curItem = items[len-(i+(++j))].cloneNode(true);
						list.insertBefore(curItem,list.childNodes[0]);
					}
					list.style.left = -itemW * num + 'px';
					startMove(list,{left:0},function(){
						for(var i = num-1 ;i >= 0 ; i--) {
							list.removeChild(items[len-1]);
						}
					});
				}
				
				//获取某一横坐标属于第几栏
				function getColByX(x) {
					var column = -1;
					for (var i = 0; i < 5; i++) {
						if(positionArr[i] < x && x <= positionArr[i+1]) {
							column = i;
						}
					}
					console.log(column)
					return column;
				}
				
				div1.onmouseover = function() {
					
					var e = event || window.event;
					var target = e.target || e.srcElement;
					
					
					if(target.nodeName = 'IMG') {
						var imgs = div1.getElementsByTagName('img');
						for (var i = 0; i < imgs.length; i++) {
							startMove(imgs[i], {opacity : 50});
						}
						
						startMove(target, {opacity : 100});
					}
				}
				
				div1.onmouseout = function() {
					var imgs = div1.getElementsByTagName('img');
					for (var i = 0; i < imgs.length; i++) {
							startMove(imgs[i], {opacity : 50});
					}
				}
					
					function getEleByClass(className) {
						var result = [];
						if(document.getElementsByClassName) {
							result = document.getElementsByClassName(className);
						}else {
							var htmlElement = document.getElementsByTagName('*');
							for (var i = 0; i < htmlElement.length; i++) {
								var item = htmlElement[i];
								if(/className/g.test(item.className)) {
									result.push(item);
								}
							}
						}
						return result;
					}
					
					//获取样式
					function getStyle(obj, attr) {
						return obj.currentStyle? obj.currentStyle(attr) : getComputedStyle(obj, false)[attr];
					}
			</script>
	</body>

</html>