万能的界面切换 -- 模板教程

来源：互联网发布：淘宝网收藏宝贝编辑：程序博客网时间：2024/04/27 12:20

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>banner</title>
<style type="text/css">
body {
text-align: center;
}

#show {
width: 260px;
height: 300px;
border: 5px solid goldenrod;
overflow: hidden;
position: relative;
margin: 0 auto;
}

#contant {
width: 1300px;
position: absolute;
left: 0;
transition: all 0.5s;
}

#contant> div {
width: 260px;
float: left;
line-height: 300px;
text-align: center;
font-size: 30px;
}
#contant> div:nth-child(1){
background-color: red;
}
#contant> div:nth-child(2){
background-color: greenyellow;
}
#contant> div:nth-child(3){
background-color: blue;
}
#contant> div:nth-child(4){
background-color: orange;
}
#contant> div:nth-child(5){
background-color: cyan;
}
</style>
</head>

<body>
<div id="banner">
<div id="button-group">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>

<div id="show">

<div id="contant">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</div>

</body>
<script type="text/javascript">
var button = document.querySelectorAll("#button-group > button");
var contentDiv = document.getElementById("contant");

function clickButton() {
for(var i = 0; i < button.length; i++) {
if(this == button[i]) {
break;
}
}
contentDiv.style.left = -260 * i + "px";
contentDiv.style.left = -260 * (this.innerHTML - 1) + "px";
}
for(var i = 0; i < button.length; i++) {
button[i].onclick = clickButton;
}
</script>

</html>

0 0