<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.stage {
width: 430px;
height: 400px;
border: 5px solid black;
margin: 200px;
position: relative;
overflow: hidden;
}
.to-left,
.to-right {
position: absolute;
top: 0px;
width: 50px;
height: 400px;
background-color: black;
color: white;
font-size: 30px;
text-align: center;
line-height: 400px;
opacity: 0.3;
}
.to-left {
left: 0px;
}
.to-right {
right: 0px;
}
.to-left:hover,
.to-right:hover {
cursor: pointer;
opacity: 0.5;
}
.banner {
width: 2500px;
height: 300px;
}
.items {
float: left;
width: 430px;
height: 400px;
background-color: blanchedalmond;
font-size: 100px;
text-align: center;
line-height: 300px;
}
</style>
<body>
<div class="stage">
<div class="to-left"><</div>
<div class="to-right">></div>
<div class="banner">
<div class="items"><img class="popMUSIC" src="./img/摇滚3.jpg" height="400px" width="430px"></div>
<div class="items" ><img class="photo-2" src="./img/摇滚6.jpg" height="400px" width="430px"></div>
<div class="items" ><img class="popMUSIC" src="./img/摇滚.jpg" height="400px" width="430px"></div>
<div class="items" ><img class="popMUSIC" src="./img/摇滚7.jpg" height="400px" width="430px" ></div>
<div class="items" ><img class="popMUSIC" src="./img/摇滚5.jpg" height="400px" width="430px"></div>
</div>
<!--</div>-->
</div>
</body>
</html>
<script>
var to_right = document.getElementsByClassName("to-right")[0];
var to_left= document.getElementsByClassName("to-left")[0];
var banner = document.getElementsByClassName("banner")[0];
var arr = [ ];
var count = 1;
to_right.onclick = function(){
toright();
}
function toright(){
arr.push(window.setInterval('moveleft()',30));
}
function moveleft(){
if(count<5){
if(banner.offsetLeft>count*(-430)){
banner.style.marginLeft =banner.offsetLeft -20+'px';
}else{
for( var x in arr){
window.clearInterval(arr[x]);
}
count++;
}
}
}
