script实现图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var changeIndex = function(obj) {
var txt = obj.innerHTML;
console.log(txt);
//1.获得nav中所有的li
var ul = document.getElementById("nav");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
if (txt == (i + 1)) {
lis[i].style.display = "block";
} else {
lis[i].style.display = 'none';
}
}
}
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#d1 {
width: 470px;
height: 170px;
overflow: hidden;
position: absolute;
z-index: 1;
}
#d2 ul {
width: 150px;
position: absolute;
right: 10px;
top: 120px;
z-index: 100;
}
#d2 ul li {
list-style-type: none;
float: right;
padding: 5px 8px;
background-color: #ccc;
margin-right: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="d1">
<ul id="nav">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
<div id="d2">
<ul>
<li onclick="changeIndex(this);">5</li>
<li onclick="changeIndex(this);">4</li>
<li onclick="changeIndex(this);">3</li>
<li onclick="changeIndex(this);">2</li>
<li onclick="changeIndex(this);">1</li>
</ul>
</div>
</div>
</body>
</html>