轮播

html
//图片
<div >
<a href="#"><img src="third.jpg" alt="" id="ul"/></a>
</div>
//按钮
<span id="left"></span>
<span id="right"></span>
javascript
autoChange();
var arr = ["first.jpg" ,"second.jpg","third.jpg"];
var count = 0;
var timer;
divEle=document.getElementById("ul");
//自动变换
function autoChange() {
timer = setInterval(function() {
++count;
if (count === arr.length) count = 0;
divEle.src = arr[count];
}, 2000);
}
//移进移出
divEle.onmouseover = function() {
clearInterval(timer);
};
divEle.onmouseout = function() {
autoChange();
};
//先前向后
var prevEle = document.getElementById("left");
var nextEle = document.getElementById("right");
nextEle.onclick = function() {
++count;
if (count === arr.length) count = 0;
divEle.src = arr[count];
};
prevEle.onclick = function() {
--count;
if (count === -1) count = arr.length - 1;
divEle.src = arr[count];
};