为什么我的鼠标移上去还是会自动切换，感觉没有问题啊
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生js幻灯片</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
a{
text-decoration:none;
}
#banner{
width:700px;
height:250px;
background:#FFC;
margin:80px auto;
overflow:hidden;
border:2px solid #000;
position:relative;
}
#list{
width:4900px;
height:250px;
z-index:1;
position:absolute;
}
.box{
width:700px;
height:250px;
float:left;
font-weight:bold;
font-size:36px;
color:#fff;
text-align:center;
line-height:250px;
}
#buttons{
bottom:20px;
z-index:2;
left:300px;
width:100px;
height:10px;
position:absolute;
}
#buttons span{
width:10px;
height:10px;
background:rgba(0,0,0,0.5);
margin-right:6px;
border-radius:50%;
float:left;
border:1px solid #fff;
}
#buttons .on{
background:#fff;
}
.arrow{
background:rgba(0,0,0,0.4);
width:20px;
height:60px;
z-index:2;
color:#fff;
line-height:60px;
text-align:center;
font-weight:bold;
top:80px;
position:absolute;
}
#prev{
left:30px;
}
#next{
left:650px;
}
</style>
</head>
<body>
<div id="banner">
<div id="list" style="left:-700px;">
<div class="box" style="background:#F93;">box5</div>
<div class="box" style="background:#F00;">box1</div>
<div class="box" style="background:#999;">box2</div>
<div class="box" style="background:#966;">box3</div>
<div class="box" style="background:#9CC;">box4</div>
<div class="box" style="background:#F93;">box5</div>
<div class="box" style="background:#F00;">box1</div>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<!-- index属性是自定义属性，不能通过this.index获取到，可以用this.setAttribute("index")来获取:this.setAttribute("index")自定义添加一个index属性 -->
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script>
window.onload = function(){
var banner = document.getElementById("banner");
var list = document.getElementById("list");
var buttons = document.getElementById("buttons").getElementsByTagName("span");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var index = 1;//当前图片所在的小圆点的位置;
var animated = false;//定义动画的开关按钮
var timea;//设置定时器
function showbutton()//绑定小圆点
{
for(var i =0; i<buttons.length; i++)//遍历span，如果span的className为“on”，就取消classname；
{
if(animated ==true)
{
return;
}
if(buttons[i].className == "on")
{
buttons[i].className = "";
break;
}
}
buttons[index-1].className = "on";//[index-1]:buttons数组是从0开始的
}
function bindbtn(offset)//绑定箭头点击事件
{
var timer = 300;//位移总时长;
var interval = 10;//位移的间隔时间;
var speed = offset/(timer/interval);//每次位移的距离
var newleft = parseInt(list.style.left)+offset;//newleft的值为=对list的left值取整加上点击所产生的偏移量离;
animated = true;
var go = function()//设置切换轮播动画效果
{
if(speed > 0 && parseInt(list.style.left) < newleft || speed < 0 && parseInt(list.style.left) > newleft)//判断是否位移,位移的条件
{
list.style.left = parseInt(list.style.left) + speed + "px";
setTimeout(go,interval);
}
else
{
animated = false;
list.style.left = newleft+"px";
if(newleft < -3500)//设置无限滚动
{
list.style.left = -700 + "px";
}
if(newleft > -700)
{
list.style.left = -3500 + "px";
}
//debugger;//设置断点，js调式常用
}
}
go();
}
function play()//自动播放
{
var timea = setInterval(function(){next.onclick();},3000);
}
function stop()
{
clearInterval(timea);
}
next.onclick = function()//右键点击事件
{
if(animated ==true)//判断图片还在滚动时，不做任何处理（解决不断点击翻页箭头时发生小圆点与图片不匹配的情况）
{
return;
}
if(index == 5)//当小圆点的位置跳到第5张时
{
index = 1;//将小圆点的位置恢复到第一张的位置;
}else{
index += 1;//如果没有到第5张，那么就自加1；
}
showbutton();
if(animated == false)
{
bindbtn(-700);
}
}
prev.onclick = function()//左键点击事件
{
if(animated ==true)
{
return;
}
if(index == 1)
{
index = 5;
}else{
index -= 1;
}
showbutton();
if(animated == false)
{
bindbtn(700);
}
}
for (var i = 0; i < buttons.length; i++)//圆点切换效果
{
buttons[i].onclick = function(){
if(this.className == "on")//优化代码：处于当前位置时，再点击当前小圆下面就跳出函数，防止代码重复调用占用内存
{
return;
}
var myindex = parseInt(this.getAttribute("index"));//通过自定义属性index获得小圆点的当前位置；
var offset = -700 * (myindex - index);//定义原点切换时产生的偏移量;
if(animated == false)
{
bindbtn(offset);
}
index = myindex;
showbutton();
}
}
banner.onmouseover = stop();
banner.onmouseout = play();
play();
}
</script>
</body>
</html>
