图片不会停止切换！求解答！
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding:0;
}
.container{
width: 1200px;
height: 656px;
overflow: hidden;
position: relative;
margin: 10px auto;
border: 2px solid black;
}
.pic{
position:absolute;
width: 8400px;
height:656px;
z-index: 1;
top:0;
left:-1200px;
}
.pic img{
float: left;
}
.tl{
background:rgba(0,0,0,0.6);
position: absolute;
z-index:2;
left: -46px;
top: 262px;
padding: 46px;
border-radius: 50%;
}
.tr{
background:rgba(0,0,0,0.6);
position: absolute;
z-index:2;
right: -46px;
top: 262px;
padding: 46px;
border-radius: 50%
}
.tl span{
position: absolute;
left:55px;
color:#fff;
font-size: 35px;
top: 30px;
}
.tr span{
position: absolute;
z-index: 3;
right:55px;
color:#fff;
font-size: 35px;
top: 30px;
}
.button{
position: absolute;
z-index: 3;
bottom: 42px;
right: 536px;
height: 25px;
margin: auto;
z-index: 2;
}
.button span{
cursor: pointer;
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
margin-right: 10.38px;
margin-top: 5px;
}
.button .on{
cursor: pointer;
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background: red;
margin-right: 10.38px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container" >
<div class="pic" id="pic" style="left:-1200px;">
<img src="/Users/starrynight/Desktop/资料/网页资料/轮播图/轮播图5.jpg" alt="p5">
<img src="/Users/starrynight/Desktop/资料/网页资料/轮播图/轮播图1.jpg" alt="p1">
<img src="/Users/starrynight/Desktop/资料/网页资料/轮播图/轮播图2.jpg" alt="p2">
<img src="/Users/starrynight/Desktop/资料/网页资料/轮播图/轮播图3.jpg" alt="p3">
<img src="/Users/starrynight/Desktop/资料/网页资料/轮播图/轮播图4.jpg" alt="p4">
<img src="/Users/starrynight/Desktop/资料/网页资料/轮播图/轮播图5.jpg" alt="p5">
<img src="/Users/starrynight/Desktop/资料/网页资料/轮播图/轮播图1.jpg" alt="p1">
</div>
<div class="tl" id="tl">
<a href="javascript:()"><span><</span></a>
</div>
<div class="tr" id="tr">
<a href="javascript:()"><span>></span></a>
</div>
<div class="button" id="button">
<span id="0" class="on"></span>
<span id="1"></span>
<span id="2"></span>
<span id="3"></span>
<span id="4"></span>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var CON=document.getElementById('container');
var PIC=document.getElementById('pic');
var Button=document.getElementById('button');
var buttons=Button.getElementsByTagName('span');
var TL=document.getElementById('tl');
var TR=document.getElementById('tr');
var subnum=0;
var timer=null;
//点击向右更换图片
TR.onclick=function(){
clearInterval(timer);
if((parseInt(PIC.style.left)-1200)<-6000){
PIC.style.left=-1200+'px';
}
else{
PIC.style.left=parseInt(PIC.style.left)-1200+'px';
}
if(subnum==4){
subnum=0;
}
else{subnum+=1;}
shine();
}
// 点击向左更换图片
TL.onclick=function(){
clearInterval(timer);
if((parseInt(PIC.style.left)+1200)>-1200){
PIC.style.left=-6000+'px';
}
else{
PIC.style.left=parseInt(PIC.style.left)+1200+'px';
}
if(subnum==0){
subnum=4;
}
else{subnum-=1;}
shine();
}
//圆点跟着发亮的函数
function shine(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=="on"){
buttons[i].className="";
}
buttons[subnum].className="on";
}
}
//点击圆点更换图片
for(var j=0; j<buttons.length;j++){
buttons[j].index=j;
buttons[j].onclick=function (){
clearInterval(timer);
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=="on"){
buttons[i].className=""
}
buttons[this.index].className="on";
PIC.style.left=-1200*(parseInt(this.index)+1)+'px';
}
}
}
//鼠标移进容器的时候就把自动切换停下来
CON.mouseover=stop;
//鼠标离开容器的时候就自动切换
CON.onmouseout=auto;
//加入自动切换功能
function auto(){
timer=window.setInterval(function(){
TR.onlick();}
,3000);
}
//自动切换停掉
function stop(){
clearInterval(timer);
}
//自动播放的定时器
}
</script>
</body>
</html>
问题是：我的鼠标移入容器内部的时候，图片切换不会停止。控制台一开始说是 CON.onmouseover=stop;的返回值不可以是null，百度一下，说改成CON.mouseover =stop;即可，后来控制台显示代码可以运行。问题是！没！效！果！求解答！！！
