大图轮播
Posted 零语言
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大图轮播相关的知识，希望对你有一定的参考价值。
今天我们学习了大图轮播，其代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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>
</head>
<body>
<div id="stage">
<div id="btn-right" onclick="moveLeftclick()">></div>
<div id="btn-left" onclick="moveRightclick()"><</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++;
}
}
function moveRightclick() {
if (count == 1) {
return false;
} else {
arr.push(window.setInterval(moveRight, 20));
}
}
function moveRight() {
ad_banner.style.marginLeft = ad_banner.offsetLeft + 10 + "px";
if (ad_banner.offsetLeft == -300 * (count - 2)) {
for (var x in arr) {
window.clearInterval(arr[x]);
}
count--;
}
}
window.setInterval("moveLeftclick()",5000);
</script>
以上是关于大图轮播的主要内容，如果未能解决你的问题，请参考以下文章