首页 > 代码库 > 图片轮播
图片轮播
<style>
*{
margin: 0px;
padding: 0px;
}
#stage{
width: 300px;
height: 200px;
border: 10px solid black;
margin: 300px;
position: relative;
overflow: hidden;
}
#ad-banner{
width: 1500px;
height: 200px;
background-color: brown;
position: relative;
z-index: 980;
/*margin-left: -300px;*/
}
.ad{
position: relative;
width: 300px;
height: 200px;
float: left;
color: white;
font-size: 100px;
text-align: center;
line-height: 200px;
z-index: 990;
}
#btn-left,#btn-right{
width: 20px;
height: 30px;
position: absolute;
top: 85px;
background-color: black;
z-index: 999;
color: white;
opacity: 0.5;
text-align: center;
line-height: 30px;
font-size: 15px;
font-weight: bold;
}
#btn-left{
left: 0px;
}
#btn-right{
right: 0px;
}
#btn-left:hover,#btn-right:hover{
opacity: 0.8;
cursor: pointer;
}
</style>
<body>
<div id="stage">
<div id="btn-left"><</div>
<div id="btn-right" onclick="moveLeftclick()">></div>
<div id="ad-banner">
<div class="ad" style="background-color: hotpink;">1</div>
<div class="ad" style="background-color: darkcyan">2</div>
<div class="ad" style="background-color: coral">3</div>
<div class="ad" style="background-color: #4CAE4C">4</div>
<div class="ad" style="background-color: blueviolet">5</div>
</div>
</div>
</body>
</html>
<script>
var ad_banner = document.getElementById("ad-banner");
var arr = [];
var count = 1;
function moveLeftclick(){
if(count == 5){
return false;
}else{
arr.push(window.setInterval("moveLeft()",20));
}
}
function moveLeft(){
ad_banner.style.marginLeft = ad_banner.offsetLeft - 10 + "px";
if(ad_banner.offsetLeft == -300 * count)
{
for(var x in arr){
window.clearInterval(arr[x]);
}
count++;
}
}
window.setInterval("moveLeftclick()",5000);
</script>
图片轮播