slider init

mixiaola · Aug 1, 2016 · 0f072a0 · 0f072a0
1 parent 73f035f
commit 0f072a0
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/index.css b/index.css
@@ -0,0 +1,58 @@
+*{
+	margin: 0; 
+	padding: 0;
+}
+ul{
+	list-style: none;
+}
+#container{
+	width: 560px;
+	height: 420px;
+	margin: 50px auto;
+	position: relative;
+	overflow: hidden;
+}
+#tab li{
+	width: 20px;
+	height: 20px;
+	background: #000;
+	color: #fff;
+	float: left;
+	margin-right: 5px;
+	text-align: center;
+	line-height: 20px;
+	cursor: pointer;
+	filter: Alpha(opacity=50); 
+	opacity: 0.5;
+}
+#tab{
+	position: absolute;
+	right: 10px;
+	bottom: 10px;
+}
+#tab .selected{
+	background: orange;
+}
+#content img{
+	display: none;
+}
+#content .selected{
+	display: block;
+}
+#arrow{
+	position: absolute;
+	left: 10px;
+	bottom: 10px;}
+#arrow span{
+	float: left;
+	width: 20px;
+	height: 20px;
+	background: #000;
+	color: #fff;
+	text-align: center;
+	line-height: 20px;
+	margin-right: 5px;
+	cursor: pointer;f
+	ilter: Alpha(opacity=50); 
+	opacity: 0.5;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+	<link rel="stylesheet" href="index.css">
+</head>
+<body>
+	<div id="container">
+		<ul id="tab">
+			<li class="selected">1</li>
+			<li>2</li>
+			<li>3</li>
+			<li>4</li>
+			<li>5</li>
+		</ul>
+		<div id="content">
+			<img src="http://img.ui.cn/data/file/6/7/9/717976.jpg" alt="" class="selected">
+			<img src="http://img.ui.cn/data/file/3/4/2/717243.jpg" alt="">
+			<img src="http://img.ui.cn/data/file/7/5/6/712657.gif" alt="">
+			<img src="http://img.ui.cn/data/file/3/2/6/712623.png" alt="">
+			<img src="http://img.ui.cn/data/file/4/3/9/708934.jpg" alt="">
+		</div>
+		<div id="arrow">
+			<span id="prev">&lt;</span>
+			<span id="next">&gt;</span>
+		</div>
+	</div>
+<script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,54 @@
+var oContainer = document.getElementById('container');
+var oTab = document.getElementById('tab');
+var aLi = oTab.getElementsByTagName('li');
+var oContent = document.getElementById('content');
+var aImg = oContent.getElementsByTagName('img');
+var oPrev = document.getElementById('prev');
+var oNext = document.getElementById('next');	
+var index = 0;	
+	for(var i=0; i<aLi.length; i++){
+		aLi[i].index = i;
+		aLi[i].onmouseover = function(){
+			index = this.index;
+			switchImg( this.index );
+		};
+	}
+
+	function switchImg(idx){
+		for(var i=0; i<aLi.length; i++){
+			aLi[i].className = "";
+			aImg[i].className = "";
+		}
+		// elem.className = "selected";
+		aLi[idx].className = 'selected';
+		aImg[idx].className = 'selected';
+	}
+
+	oPrev.onclick = function(){
+		index--;
+		if(index < 0){
+			index = aLi.length - 1;
+		}
+		switchImg( index );
+	};
+	oNext.onclick = function(){
+		index++;
+		if(index > aLi.length - 1){
+			index = 0;
+		}
+		switchImg( index );
+	};
+
+	var timer = setInterval(function(){
+		oNext.onclick();
+	}, 2000);
+
+	oContainer.onmouseover = function(){
+		clearInterval(timer);
+	};
+
+	oContainer.onmouseout = function(){
+		timer = setInterval(function(){
+			oNext.onclick();
+		}, 2000);
+	};