轮播制作

这是样式设置

#wutai {
width :600px;
height :298px;

overflow:hidden ;
position :relative ;
float :left ;
}
#tiaofu {
width :3000px;
height:298px;
background-color:#0094ff;

}
.guanggao-1 {
width :600px;
height:298px;
float :left;
z-index :990;
}
#btn-left {
width :20px;
height :30px;
left:0px;
position :absolute ;
top:135px;
z-index :999;
background-color :yellow ;
opacity :0.5;
text-align :center ;
line-height :30px;
}
#btn-right {
width :20px;
height :30px;
right:0px;
position :absolute ;
top:135px;
z-index :999;
background-color :yellow;
opacity :0.5;
text-align :center ;
line-height :30px;
}
#btn-left:hover, #btn-right:hover {
opacity :0.8;
cursor :pointer ;
}
.c3-binglie-wutai {
width :590px;
height:298px;

float :left;
color :white;
font-family :"微软雅黑";
font-size :14px;
line-height :40px;
text-indent :28px;

}

写新的div内容

<div id="wutai">
<div id="btn-left" onclick="moveRightclick()"><<</div>
<div id="btn-right" onclick ="moveLeftclick()">>></div>
<div id="tiaofu">
<div class ="guanggao"><input type="image" class="guanggao-1" src="" /></div> 在src里写上图片地址
<div class ="guanggao"><input type="image" class="guanggao-1" src="" /></div>
<div class ="guanggao"><input type="image" class="guanggao-1" src="" /></div>
<div class ="guanggao"><input type="image" class="guanggao-1" src="" /></div>
<div class ="guanggao"><input type="image" class="guanggao-1" src="" /></div>

</div>
</div>

写script里的事件内容和条件语句

<script >
var ad_tiaofu = document.getElementById("tiaofu");
var arr = [];
var count = 1;

function moveLeftclick() {
if (count == 5) {
//return false;
ad_tiaofu.style.marginLeft = 0 + "px";
count = 1;
} else {
arr.push(window.setInterval(moveLeft, 30));
}

}

function moveLeft() {
ad_tiaofu.style.marginLeft = ad_tiaofu.offsetLeft- 20 + "px";
if (ad_tiaofu.offsetLeft == -600 * count) {
for (var x in arr) {
window.clearInterval(arr[x]);
}
count++;
}

}
window.setInterval(moveLeftclick, 4000);

function moveRightclick() {
if (count == 1) {
return false;
} else {
arr.push(window.setInterval(moveRight, 30));
}

}

function moveRight() {
ad_tiaofu.style.marginLeft = ad_tiaofu.offsetLeft + 20 + "px";
if (ad_tiaofu.offsetLeft == -600 * (count-2)) {
for (var x in arr) {
window.clearInterval(arr[x]);
}
count--;
}

}

</script>