<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#warp{
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.l{
border: 0;
position: absolute;
left:0;
top:230px;
width: 80px;
height: 40px;
font-size: 30px;
}
.r{
border: 0;
position: absolute;
right:0;
top:230px;
width: 80px;
height: 40px;
font-size: 30px;
}
ul{
list-style: none;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
}
li{
float: left;
width: 30px;
height: 30px;
background: #ccc;
margin: 5px 35px;
position: relative;
}
li>img{
position: absolute;
top:-50px;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="warp">
<img src="img/0.jpg"/>
<button class="l"><</button>
<button class="r">></button>
<ul>
<li style="background: red;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
var oimg=document.getElementsByTagName('img')[0];
var obtn=document.getElementsByTagName('button');
var oli=document.getElementsByTagName('li');
var arr=[0,1,2,3,4];
var n=0;
obtn[0].onclick=function(){
n--;
if(n<0){
n=arr.length-1;
}
changimg()
}
obtn[1].onclick=function(){
n++;
if(n>arr.length-1){
n=0;
}
changimg()
}
function changimg(){
oimg.src='img/'+arr[n]+'.jpg';
for(var i=0; i<oli.length;i++){
oli[i].style.background='';
}
oli[n].style.background='red';
}
//循环点击li
for(var i=0; i<oli.length;i++){
oli[i].index=i;
oli[i].onmouseover=function(){
n=this.index;
oimg.src='img/'+arr[n]+'.jpg';
changimg()
this.innerHTML="<img src="+"img/"+arr[this.index]+'.jpg>';
}
oli[i].onmouseout=function(){
this.innerHTML='';
}
}
</script>
</html>
网友评论