<!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>
html表单
原文地址：http://www.cnblogs.com/zhangsiyuan/p/7722880.html