<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{
position: relative;
width:500px;
height: 350px;
margin:50px auto;
}
.wrap ul li{
position: absolute;
top:0;
left:0;
width:100%;
height:350px;
font-size: 100px;
line-height: 350px;
text-align:center;
display: none;
}
.wrap span{
position: absolute;
top:50%;
display: inline-block;
width:30px;
height:50px;
font-size: 30px;
text-align: center;
line-height:50px;
background-color: #ccc;
cursor: pointer;
margin-top: -25px;
}
.wrap span:first-child{
left:0;
}
.wrap span:last-child{
right:0;
}
.wrap ul li.on{
display: block;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="on" style="background-color: pink;">一</li>
<li style="background-color: blue;">二</li>
<li style="background-color: red;">三</li>
<li style="background-color: yellow;">四</li>
<li style="background-color: green;">五</li>
</ul>
<span id="left"><</span>
<span id="right">></span>
</div>
<script type="text/javascript">
var oLi = document.querySelectorAll("li");
console.log(oLi)
var oL = document.getElementById("left");
var oR = document.getElementById("right");
var length = oLi.length;
var index = 0;
oR.onclick = function(){
// oL[i].index = i;
oLi[index].className = "";//上一张隐藏
index++;
if(index>4){
index = 0;
}
oLi[index].className = "on";//下一张显示
};
oL.onclick = function(){
oLi[index].className = "";//上一张隐藏
index--;
if(index<0){
index = 4;
}
oLi[index].className = "on";//下一张显示
}
</script>
</body>
</html>
网友评论