<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
img{
display: block;
}
ul{
list-style:none;
}
#wrap{
margin-left:200px;
}
#banner{
position:relative;
638px;
}
/* .banner img{
display: none;
}*/
#banner img{
display: block;
638px;
}
#prev,#next{
display: block;
48px;
height:48px;
background:rgba(0,0,0,0.5);
color:#fff;
position:absolute;
top:50%;
font:bold 30px/48px "幼圆";
text-align: center;
margin-top: -24px;
border-radius: 100px;
cursor:pointer;
-webkit-user-select:none;
user-select:none
}
#prev{
left:22px;
}
#next{
right:22px;
}
#prev:hover,#next:hover{
background:rgba(0,0,0,0.8);
}
#pointer{
position:absolute;
right:272px;
bottom:50px;
}
#pointer li{
10px;
height:10px;
border-radius: 100px;
background: #fff;
float: left;
margin-left: 5px;
}
#pointer li#active{
background:blue;
}
</style>
</head>
<body>
<div id="wrap">
<div id="banner">
<a><img src="pic0.jpg"></a>
<span id="prev"> < </span>
<span id="next"> > </span>
<ul id="pointer">
<li class="li"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript">
var banner = document.getElementById("banner");
var next = document.getElementById("next");
var prev = document.getElementById("prev");
var imgs = banner.getElementsByTagName("img")[0];
var lis = banner.getElementsByTagName("li");
var len = lis.length;
var index = 0;
next.onclick = function(){
index++;
if(index == 5){
index = 0;
}
change(index);
}
prev.onclick = function(){
index--;
if(index == -1){
index = 4;
}
change(index);
}
function change(index){
//console.log("pic" + index + ".jpg")
imgs.src = "pic" + index + ".jpg";
for(var i = 0; i < lis.length; i++){
lis[i].style.background = '#fff';
}
//console.log(lis.length);
lis[index].style.background = "#ccc";
}
while(len--){
lis[len].index = len;
lis[len].onmouseover = function(){
change(this.index + 1)
}
}
</script>
</body>
</html>
