<style type="text/css">
*{ margin:0px auto; padding:0px;}
#wai{ 100%; height:400px; overflow:hidden; margin-top:30px; }
#tu1{ 1200px; height:4000px;}
#tu2{ 1200px; height:400px;}
#tu3{ 1200px; height:400px; display:none;}
.lr{ 50px; height:50px; background-color:#63F;}
#left{ position:relative; top:-225px; left:-500px;}
#right{ position:relative; top:-275px; left:500px;}
</style>
<body>
<div id="wai">
<div id="tu1" class="tu"><img src="img/jiaruwomen.jpg"/></div>
<div id="tu2" class="tu"><img src="img/cangku.jpg"></div>
<div id="tu3" class="tu"><img src="img/dangqianweizhi.png"></div>
</div>
<div id="left" class="lr"></div>
<div id="right" class="lr"></div>
</body>
//js方法
<script type="text/javascript">
var t = document.getElementsByClassName("tu");
//当前显示的索引号；
var index = 0;
//调用5s自动轮播图片
window.setInterval("huan()",5000);
function huan(){
if(index<2){
index++;
}else{
index=0;
}
//使用yidong方法
yidong(index);
}
//先定义一个移动方法，
function yidong(index){
for(var i=0;i<t.length;i++){
t[i].style.display = "none";
}
t[index].style.display = "block";
}
var l = document.getElementById("left");
var r = document.getElementById("right");
//给左按钮加点击事件,往左点index-1
l.onclick = function(){
if(index>0){
index--;
}else{
index=t.length-1;
}
yidong(index);
}
r.onclick = function(){
if(index<2){
index++;}
else{
index=0;
}
yidong(index);
}