<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>PowerByMr.Dog</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
.banner{
height:180px;
width:100%;
padding:0;
}
.banner ul{
width:100%;
height:180px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
margin:0 auto;
}
.banner li{
width:1400px;
height:176px;
/*border:1px solid red;*/
margin:0 auto;
list-style:none;
padding:0;
}
img {
width:1400px;
}
.left{
width:80px;
height:180px;
border:1px solid #000;
position:relative;
top:-180px;
}
.right{
width:80px;
height:180px;
border:1px solid #0f0;
position:relative;
float:right;
top:-360px;
}
#number{
width:200px;
height:40px;
border:1px solid #000;
margin:0;
padding:0;
position:relative;
overflow:hidden;
top:-50px;
}
.number li{
float:left;
width:50px;
height:40px;
background-color:#e2e2e2;
/*border:1px solid #dd3043;*/
list-style:none;
text-align:center;
line-height:40px;
cursor: pointer;
opacity:0.3;
}
</style>
</head>
<body>
<div class="banner" id="banner">
<ul id = "list">
<li><a href="https://www.baidu.com/"><img src="0.jpg" alt=""/></a></li>
<li><a href="https://www.taobao.com/"><img src="1.jpg" alt=""/></a></li>
<li><a href="www.jd.com"><img src="2.jpg" alt=""/></a></li>
<li><a href="https://www.tmall.com/"><img src="3.jpg" alt=""/></a></li>
</ul>
<div class="left" id='left' onclick="left();"></div>
<div class="right" id='right' onclick="right();"></div>
</div>
<ul class="number" id="number">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script type="text/javascript">
document.getElementById('number').style.left = '30%';
var list = new Array();
var Counter = 0;
var length = document.getElementById('list').getElementsByTagName('li').length;
var lis = document.getElementById('list').getElementsByTagName('li')[0];
for(var i = 0;i<length;i++){
list.push(document.getElementById('list').getElementsByTagName('li')[i].innerHTML);
}
setInterval("go()",9000);
function go(){
lis.innerHTML = list[Counter];
if(Counter==3){
Counter=0;
}
Counter++;
}
function left(){
lis.innerHTML = list[Counter];
if(Counter ==0){
Counter = 4;
}
Counter -= 1;
}
function right(){
lis.innerHTML = list[Counter];
if(Counter == 4){
Counter = 0;
}
Counter += 1;
}
for(var k=0;k<4;k++){
document.getElementById('number').getElementsByTagName('li')[k].onclick=function(){
var num = this.innerHTML;
lis.innerHTML = list[num];
}
}
</script>
</html>