首先设置一个大div stage，再在里边放一个条幅ad-banner，然后再放五个div模块ad，用来轮播，然后就是设置左右切换按钮：left-btn、right-btn。
<body>
<div class="stage">
<div class="to-left">
</div>
<div class="to-right">></div>
<div class="banner">
<div class="items" style="background-color: green;">1</div>
<div class="items" style="background-color: royalblue;">2</div>
<div class="items" style="background-color: red;">3</div>
<div class="items" style="background-color: yellow;">4</div>
<div class="items" style="background-color: gray;">5</div>
</div>
</div>
</body>
接下来就是用CSS样表对body里边的内容进行设置。
* {
margin: 0px;
padding: 0px;
}
.stage {
width: 300px;
height: 200px;
border: 10px solid black;
margin: 50px;
margin-left: 200px;
overflow: hidden;
position: relative;
}
.banner {
width: 1500px;
height: 200px;
}
然后就是对五个div模块设置宽高，设置行高及水平居中，流式布局向左，
.items {
width: 300px;
height: 200px;
float: left;
font-size: 50px;
line-height: 200px;
color: white;
text-align: center;
}
然后设置左右按钮，设置宽高，用绝对定位来定位，设置透明效果，字体大小等。设置字体大小颜色等。
.to-left,
.to-right {
height: 200px;
width: 20px;
position: absolute;
line-height: 200px;
background-color: gray;
opacity: 0.5;
font-size: 20px;
text-align: center;
}
.to-left {
left: 0px;
}
.to-right {
right: 0px;
}
接下来就是用JS设计点击事件
<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));
}
to_left.onclick = function() {
toLeft();
}
function toLeft() {
arr.push(window.setInterval("moveRight()", 30));
}
function moveLeft() {
if(count < 5) {
if(banner.offsetLeft > count * (-500)) {
banner.style.marginLeft = banner.offsetLeft - 20 + "px";
} else {
for(var x in arr) {
window.clearInterval(arr[x]);
}
count++;
}
}
}
function moveRight() {
if(count - 1 > 0) {
if(banner.offsetLeft < (count - 2) * (-500)) {
banner.style.marginLeft = banner.offsetLeft + 20 + "px";
} else {
for(var x in arr) {
window.clearInterval(arr[x]);
}
count--;
}
}
}
window.setInterval("toRight()", 1750);
</script>
