ife-task0001暂存

最新推荐文章于 2019-05-19 17:27:56 发布

放风筝的小小马

最新推荐文章于 2019-05-19 17:27:56 发布

阅读量403

点赞数

分类专栏： HTML+CSS+JScprit java/python

本文链接：https://blog.csdn.net/hexon804/article/details/51124113

版权

HTML+CSS+JScprit 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

java/python

7 篇文章 0 订阅

订阅专栏

<pre name="code" class="javascript"><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/task0002_3.css">
	<script type="text/javascript" src="js/task0002_3.js" defer="defer"></script>	
	<title>task0002_3</title>
</head>
<body>
 	<div id="task3">
 		<span class="tip">任务3：轮播图</span>
 		<div id="contains">
 			<div id="img-wrap" style="left: 0px">
 				<img src="img/slide-1.png" alt="1">
 				<img src="img/slide-2.png" alt="2">
 				<img src="img/slide-3.png" alt="3">
 				<img src="img/slide-4.png" alt="4">
 				<img src="img/slide-5.png" alt="5">
 				<img src="img/slide-6.png" alt="6">
 			</div>
<div id="fp-nav">
 				<ul>
		 			<li class="light" index="0"><a href="#"></a></li>
		 			<li index="1"><a href="#"></a></li>
		 			<li index="2"><a href="#"></a></li>
		 			<li index="3"><a href="#"></a></li>
		 			<li index="4"><a href="#"></a></li>
	 			</ul>
 			</div>
	 		
 		</div>
 		<div id="setting">
 			<div class="order">				
 				<input type="radio" name="order" value="positive">正序</input>
 				<input type="radio" name="order" value="opposite">反序</input>
 			</div>
<div class="circle">
 				<input type="radio" name="circle" value="yes">循环</input>
 				<input type="radio" name="circle" value="No">单次</input>
 			</div>
 			<div class="time">
 				<input type="text" name="time" placeholder="请输入时间间隔" id="time">s</input>
 			</div>
			
			<div class="execute">
				<input type="button" name="btn" id="start" value="开始"></input>
				<input type="button" name="btn" id="stop" value="停止"></input>
			</div>	
 		</div>
 		
 	</div>

</body>
</html>

#task3 {
width: 980px;
margin: 20px auto;
}
#task3 span{
font-size: 1.2em;
font-weight: bold;
}

#contains {
width:600px;
height: 375px;
border: 1px solid black;
position: relative;
overflow: hidden;
}

#fp-nav {
<span style="white-space:pre">	</span>position: absolute;
<span style="white-space:pre">	</span>z-index: 2;
<span style="white-space:pre">	</span>top: 355px;
<span style="white-space:pre">	</span>left: 250px;
}




#fp-nav ul li{
 <span style="white-space:pre">	</span>width: 10px;
 <span style="white-space:pre">	</span>height: 10px;
 <span style="white-space:pre">	</span>color: white;
 <span style="white-space:pre">	</span>display:inline-block;
 <span style="white-space:pre">	</span>margin-right: 5px;
 <span style="white-space:pre">	</span>border: 2px solid #C0BDBD;
 <span style="white-space:pre">	</span>border-radius: 50%;
 <span style="white-space:pre">	</span>cursor: pointer;


}


#fp-nav ul .light {
<span style="white-space:pre">	</span>background: #976F6F;
}


#img-wrap {
<span style="white-space:pre">	</span>width: 3600px;
<span style="white-space:pre">	</span>font-size: 0px;
<span style="white-space:pre">	</span>z-index: -1;
<span style="white-space:pre">	</span>position:absolute;
}

#img-wrap img{
<span style="white-space:pre">	</span>width: 600px;
<span style="white-space:pre">	</span>display:inline-block;




}


#setting div {
<span style="white-space:pre">	</span>margin: 5px 0;
}


#setting div {
<span style="white-space:pre">	</span>color: #7470AC;
}
#setting .execute input{
<span style="white-space:pre">	</span>width: 50px;
<span style="white-space:pre">	</span>height: 20px;
<span style="white-space:pre">	</span>background: #D0D3E4;
<span style="white-space:pre">	</span>color: #BF8888;
<span style="white-space:pre">	</span>border-radius: 5px;
<span style="white-space:pre">	</span>border: 1px solid  #BAB4B4;
<span style="white-space:pre">	</span>margin-right: 30px;
<span style="white-space:pre">	</span>padding: 10px auto;
<span style="white-space:pre">	</span>cursor: pointer;
}


#setting .execute input:hover {
<span style="white-space:pre">	</span>background: #6C789B;
<span style="white-space:pre">	</span>color: white;
}

nction animate() {
	// 设置动画失效
	var isAnimate = false;	
	var dispSeq = 0;				//是否是正序
	var dispCircle = 0;				//是否循环	
	var dispTime = 2;				// 如果使用自动切换，该时间表示一张图片显示的时间

	// 取得fa-nav下的li标签
	var lis = document.getElementById("fp-nav").getElementsByTagName("li");
	// 获得显示图片的id
	var img = document.getElementById("img-wrap");
	var dispIndex = 0;				//	当前正显示的图片索引
	var timerHandler ;				// 自动播放时，定时器的句柄

	function showSel(sel) {
		// 先移除包含有light类名的对象， 然后根据sel对对象添加类名为light的类
		for (var i = 0; i < lis.length; i++) {
			if (lis[i].getAttribute("class") === "light") {
				lis[i].removeAttribute("class");
			}
		}
		// 添加类名为light的类
		lis[sel].setAttribute("class", "light");
	}
       function run(offset) {
		isAnimate = true;
		var newleft = parseInt(img.style.left) + offset;
		var speed = offset / (5);
		console.log("运行run函数")
		function go() {		 
			if (parseInt(img.style.left) != newleft) {
				img.style.left = parseInt(img.style.left) + speed + 'px';
				setTimeout(go, 50);
			} else {
				isAnimate = false;
				showSel(dispIndex);
				console.log("isAnimate = " + isAnimate);
			}
		}
		go();
	}
       // 添加手动移动照片
	function manualOperate() {
		for (var i = 0; i < lis.length; i++) {
			EventUtil.addHandler(lis[i], "click", function(){
				if (!isAnimate) {

					var toIndex = this.getAttribute("index");

					if (toIndex === dispIndex) {
						return ;
					}
					run((toIndex - dispIndex) * (-600));
					dispIndex = toIndex;

				}
			});
		}
	}
       // 获得参数
	function getParameter() {
		// 先清除正反序,和循环
		dispSeq = 0;
		dispCircle = 0;

		var order = document.getElementsByName("order");
		var circle = document.getElementsByName("circle");
		// 获得显示时间间隔
		dispTime = (document.getElementById("time").value > 0)?(document.getElementById("time").value):2;
		dispTime *= 1000;
		// 获得显示的正反序
		for (var i = 0; i < order.length; i++) {
			if (order[i].checked) {
				if (order[i].value == "positive") {
					dispSeq = -1;			// 正序
				} else if (order[i].value == "opposite") {	
					dispSeq = 1;			// 反序
				} 
			} 
		}
// 获得显示是否循环
		for (var i = 0; i < circle.length; i++) {
			if (circle[i].checked) {
				if (circle[i].value == "yes") {
					dispCircle = 1;				// 循环
				} else {
					dispCircle = 2;				// 不循环
				}
			}
		}
		
	}
	// 开始和停止
	function startAndStop() {
		var start = document.getElementById("start");
		var stop  = document.getElementById("stop");
// 添加开始按钮事件
		EventUtil.addHandler(start, "click", function() {
			var startKey = false;
			// 当点击开始时，先获取参数
			getParameter();			
			// 判断是否设置了参数
			if ((dispSeq != 0) && (dispCircle != 0) && (dispTime != 0)) {
				console.log("dispSeq = " + dispSeq);
				console.log("dispCircle = " + dispCircle);
				console.log("dispTime = " + dispTime);
				if (((dispSeq === -1) && (dispIndex === 4)) || 
					 ((dispSeq === 1) && (dispIndex === 0))) {
					startKey = true;
				} else {
					startKey = false;
				}
				// 只有当图片没有处于运行状态，按开始键才有效
				if (!isAnimate) {
					timerHandler = setInterval(function(){
						isAnimate = true;
 var offset;
						if (dispCircle === 1) {			// 循环
							if (dispSeq === -1) {			// 正序
								if (dispIndex === 4) {		// 到达边界
									offset = 2400;
									dispIndex = 0;
								} else {
									offset = -600;
									dispIndex++;
								}
							} else {						//反序
								if (dispIndex === 0) {		// 到达边界
									offset = -2400;
									dispIndex = 4;
								} else {
									offset = 600;
									dispIndex--;
								}
							}
						} else { 
if (dispSeq === -1) {			// 正序
								if (dispIndex === 4) {		// 到达边界
									if (startKey == true) {
										startKey = false;
										offset = 2400;
										dispIndex = 0;	
									} else {
										isAnimate = false;
										clearInterval(timerHandler);
										return ;
									}
								} else {
									offset = -600;
									dispIndex++;
									console.log(offset);
								}
							} else {
if (dispIndex === 0) {		// 到达边界
									if (startKey == true) {
										startKey = false;
										offset = -2400;
										dispIndex = 4;	
									} else {
										isAnimate = false;
										clearInterval(timerHandler);
										return ;
									}
								} else {
									offset = 600;
									dispIndex--;
								}
							}
						}
						run(offset);
					}, dispTime);
				}
			}
			// 没有设置参数，提示设置参数
			else {
				alert("请先设置参数")
			}
		});
		EventUtil.addHandler(stop, "click", function() {
			clearInterval(timerHandler);
		});
	}
	manualOperate();
	startAndStop();
}
window.onload = animate();