<style type="text/css">
*{
margin:0;
padding:0;
}
.rota-img{
width:650px;
height:350px;
position:absolute;
top:0;right:0;bottom:0;left:0;
margin:auto;
}
.rota-img button:nth-child(2){
position:absolute;
top:0;bottom:0;
margin:auto 0;
left:0;
width:40px;
height:40px;
font-size:30px;
}
.rota-img button:nth-child(3){
width:40px;
height:40px;
position:absolute;
top:0;bottom:0;
margin:auto 0;
right:0;
font-size:30px;
}
.rota-img img{
width:650px;
height:350px;
}
</style>
</head>
<body>
<div class="rota-img">
<img src="1.jpg" id="rotaImg" class="imgs">
<button onclick="goPre()"><</button>
<button onclick="goNext()">></button>
</div>
<script type="text/javascript">
var arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
var timer;
var inx = 0;
function autoRotate(){
document.getElementById("rotaImg").src = arr[inx];
if(inx == 4){
inx = 0;
}else{
inx++;
}
timer = setTimeout(autoRotate,2000);
}
autoRotate();
function goNext(){
clearTimeout(timer);
document.getElementById("rotaImg").src = arr[(inx+1)];
autoRotate();
}
function goPre(){
clearTimeout(timer);
document.getElementById("rotaImg").src = arr[(inx-1)];
autoRotate();
}
</script>
分享
