记录自己前端的一点一滴

记录自己前端的一点一滴,无喷.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
*{ margin: 0; padding: 0;}
ul{ list-style: none;}
#slidebox{ margin: 40px auto; width: 700px; height: 300px; position: relative; overflow: hidden;}
#slide{ position: relative;}
#slide li{ float: left; width: 700px; height: 300px; overflow: hidden;}
#slide li img{ width: 700px; height: 300px;}
#btn{ position: absolute; bottom: 10px; left: 50%; margin-left: -75px;}
#btn span{ display: inline-block; width: 16px; height: 16px; background: #ccc; margin: 0 5px;}
#btn span.on{ background: blue;}
#obtn{ text-align: center;}
#obtn a{ color: #000; font-size: 16px; margin: 0 20px;}
</style>
</head>
<body>
<div id="slidebox">
	<ul id="slide">
		<li><img src="images/a1.jpg"></li>
		<li><img src="images/a2.jpg"></li>
		<li><img src="images/a1.jpg"></li>
		<li><img src="images/a2.jpg"></li>
		<li><img src="images/a1.jpg"></li>
	</ul>
	<div id="btn">
		<span class="on"></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
<div id="obtn">
	<a href="javascript:;" id="leftbtn">left</a>
	<a href="javascript:;" id="rightbtn">right</a>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function (){
	function Slide(){
		var box = document.getElementById('slide');
		var boxL = box.getElementsByTagName('li');
		var len = boxL.length;
		var clone = boxL[0].cloneNode(true);
		var clone2 = boxL[len - 1].cloneNode(true);
		box.appendChild(clone);
		box.insertBefore(clone2,box.childNodes[0]);
		box.style.width = 700*(len+2)+'px';
		box.style.left = -700 + 'px';
		var left = document.getElementById('leftbtn');
		var right = document.getElementById('rightbtn');
		var span = document.getElementById('btn').getElementsByTagName('span');
		var now = 0;
		var speed = 700/30;
		var timer,oTimer;
		for (var i = 0; i < span.length; i++) {
			span[i].index = i;
			span[i].onmouseover = function (){
				now = this.index;
				next();
			}
		};
		left.onclick = function (){

			if (now > 0){
				now -=1;
				next();
			} 
			else if(now == 0){
				now -= 1;
				next();
				
				setTimeout(function (){
					now = len - 1;
					box.style.left = (now+1)*-700 + 'px';
				},700);
				
			}
			
		}
		right.onclick = function (){
			if (now < len -1){
				now +=1;
				next();
			} 
			else if(now == len -1){
				now += 1;
				next();
				
				setTimeout(function (){
					now = 0;
					box.style.left = (now+1)*-700 + 'px';
				},700);
				
			}
		}
		function next(){
			for (var i = 0; i < span.length; i++) {
				var index;
				if (span[i].className == "on") index = i + 1;

				span[i].className = "";
			};
			if (now == len) {
				span[0].className = "on";
			}
			else if( now == -1){
				span[len - 1].className = "on";
			}
			else{
				span[now].className = "on";
			};
			
			clearInterval(timer);
			timer = setInterval(function(){
				if (box.offsetLeft < (now+1)*-700) {	
					if (box.offsetLeft >= (now+1)*-700) {
						clearInterval(timer);
					}
					else{
						box.style.left = box.offsetLeft + Math.abs(parseInt(now+1 - index))*30 + 'px';
						if (box.offsetLeft >= (now+1)*-700) {
							box.style.left = (now+1)*-700 + 'px';
						};
					};
				}
				else{
					if (box.offsetLeft <= (now+1)*-700) {
						clearInterval(timer);
					}
					else{
						box.style.left = box.offsetLeft - Math.abs(parseInt(now+1 - index))*30 + 'px';
						if (box.offsetLeft <= (now+1)*-700) {
							box.style.left = (now+1)*-700 + 'px';
						};
					};
				};
			},30);
		}
		oTimer = setInterval(function (){
			right.onclick();
		},8000);
		box.onmouseover = function (){
			clearInterval(oTimer);
		}
		box.onmouseout = function (){
			oTimer = setInterval(function (){
				right.onclick();
			},8000);
		};
		
	}
	Slide();
}
</script>


你可能感兴趣的:(position,hidden,relative,记录javascript)