                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /焦點(diǎn)圖輪播特效

圖片不會停止切換！求解答！

<!DOCTYPE html>

<html>

<head>

*{

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/資料/網(wǎng)頁資料/輪播圖/輪播圖5.jpg" alt="p5">

? ? ? ? ?<img src="/Users/starrynight/Desktop/資料/網(wǎng)頁資料/輪播圖/輪播圖1.jpg" alt="p1">

? ? ? ? ?<img src="/Users/starrynight/Desktop/資料/網(wǎng)頁資料/輪播圖/輪播圖2.jpg" alt="p2">

? ? ? ? ? ? <img src="/Users/starrynight/Desktop/資料/網(wǎng)頁資料/輪播圖/輪播圖3.jpg" alt="p3">

? ? ? ? ?<img src="/Users/starrynight/Desktop/資料/網(wǎng)頁資料/輪播圖/輪播圖4.jpg" alt="p4">

? ? ? ? ?<img src="/Users/starrynight/Desktop/資料/網(wǎng)頁資料/輪播圖/輪播圖5.jpg" alt="p5">

? ? ? ? <img src="/Users/starrynight/Desktop/資料/網(wǎng)頁資料/輪播圖/輪播圖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>

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;

//點(diǎn)擊向右更換圖片

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();

}

// ?點(diǎn)擊向左更換圖片

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();

}

? ? //圓點(diǎn)跟著發(fā)亮的函數(shù)

function ?shine(){

for(var i=0;i<buttons.length;i++){

if(buttons[i].className=="on"){

buttons[i].className="";

}

buttons[subnum].className="on";

? ?}

}

? ?//點(diǎn)擊圓點(diǎn)更換圖片

? ? 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';

? }

? ? ? ?} ?

? ?}

? ?//鼠標(biāo)移進(jìn)容器的時候就把自動切換停下來

? ?CON.mouseover=stop;

? ?

? ?//鼠標(biāo)離開容器的時候就自動切換

? ?CON.onmouseout=auto;

? ?//加入自動切換功能

? ?function auto(){

? ? timer=window.setInterval(function(){

? ? TR.onlick();} ?

? ? ,3000);

? ?}

? ?//自動切換停掉

? ?function stop(){

? ? clearInterval(timer);

? ?}

? ? //自動播放的定時器

}

</script>

</body>

</html>

問題是：我的鼠標(biāo)移入容器內(nèi)部的時候，圖片切換不會停止。控制臺一開始說是
CON.onmouseover=stop;的返回值不可以是null，百度一下，說改成CON.mouseover
=stop;即可，后來控制臺顯示代碼可以運(yùn)行。問題是！沒！效！果！求解答！?。?/pre>