标签：rip ntb oct tle doctype div head none ref
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding:0;
}
#qiehuan{
width:520px;
height:280px;
margin:150px auto;
position: relative;
}
#qiehuan ul li{
list-style: none;
position: absolute;
}
#leftBtn{
display: block;
background: url("../img/btn.png");
width:48px;
height:60px;
position: absolute;
top:110px;
left:1px;
z-index: 9999;
}
#rightBtn{
display: block;
background: url("../img/btn.png");
width:48px;
height: 60px;
background-position: -48px 0px;
position: absolute;
top:110px;
right:1px;
z-index: 9999;
}
</style>
</head>
<body>
<div id="qiehuan">
<a href="#" id="leftBtn"></a>
<a href="#" id="rightBtn"></a>
<ul>
<li><img src="../img/11.jpg" ></li>
<li><img src="../img/12.jpg" ></li>
<li><img src="../img/13.jpg" ></li>
<li><img src="../img/14.jpg" ></li>
<li><img src="../img/15.jpg" ></li>
</ul>
</div>
<script type="text/javascript">
var i = 4;//控制下标变量
var index = 1;//控制 li的zIndex值
var list = document.getElementsByTagName("li");
function $(id) {
return document.getElementById(id);
}
$("rightBtn").onclick = (function () {
i++;
if(i == list.length){
i=0;
}
list[i].style.zIndex=++index;
});
$("leftBtn").onclick = (function () {
i--;
if(i == -1){
i=4;
}
list[i].style.zIndex=++index;
});
</script>
</body>
</html>
标签：rip ntb oct tle doctype div head none ref
原文地址：http://www.cnblogs.com/zhangsiyuan/p/7722880.html
