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

container.onmouseover=play跟container.onmouseover=play()有什么區(qū)別？

<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>焦點輪播圖-練習</title>
<style>
*{?margin:0;?padding:0;?text-decoration:none;}
body{?padding:20px;}
#container{?position:relative;?width:600px;?height:400px;?overflow:hidden;?border:3px?solid?#000;}
#list{?position:absolute;?width:4200px;?height:400px;?z-index:1;}
#list?img{?float:left;}
#buttons{?position:absolute;?z-index:2;?bottom:20px;?left:250px;?height:10px;?width:100px;}
#buttons?span{?cursor:pointer;?float:left;?border:1px?solid?#FFF;?background:#333;?width:10px;?height:10px;?border-radius:50%;?margin-right:5px;}
#buttons?.on{?background:orangered;}
.arrow{?color:#FFF;?background-color:RGBA(0,0,0,.3);?cursor:pointer;?display:none;?line-height:39px;?font-size:36px;?text-align:center;?width:40px;?height:40px;?font-weight:bold;?position:absolute;?z-index:2;?top:180px;}
.arrow:hover{?background:RGBA(0,0,0,.7);}
#container:hover?.arrow{?display:block;}
#prev{?left:20px;}
#next{?right:20px;}
</style>
????<script>
????????window.onload?=?function?()?{
????????????var?container?=?document.getElementById('container');
????????????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?timer;
????????????//亮燈函數
????????????function?showButton()?{
????????????????for?(var?i?=?0;?i?<?buttons.length;?i++){
????????????????????if?(buttons[i].className?==?'on'){
????????????????????????buttons[i].className?=?'';
????????????????????????break;
????????????????????}
????????????????}
????????????????buttons[index?-?1].className?=?'on';
????????????}
????????????//輪播函數
????????????function?animate(offset)?{
????????????????animated?=?true;
????????????????var?newLeft?=?parseInt(list.style.left)?+?offset;
????????????????var?time?=?300;//位移總時間
????????????????var?interval?=?10;//位移間隔時間
????????????????var?speed?=?offset/(time/interval);//每次位移量
????????????????//輪播過渡函數
????????????????function?go()?{
????????????????????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?>?-600){
????????????????????????????list.style.left?=?-3000?+?'px';
????????????????????????}
????????????????????????if?(newLeft?<?-3000){
????????????????????????????list.style.left?=?-600?+?'px';
????????????????????}
????????????????}
????????????????}
????????????????go();
????????????}

????????????function?play()?{
????????????????timer?=?setInterval(function?()?{
????????????????????next.onclick();
????????????????},1500);
????????????}
????????????function?stop()?{
????????????????clearInterval(timer);
????????????}

????????????next.onclick?=?function?()?{
????????????????if?(!animated){
????????????????????if?(index?==?5){
????????????????????????index?=?1;
????????????????????}
????????????????????else?{
????????????????????????index?+=?1;
????????????????????}
????????????????????showButton();
????????????????????animate(-600);
????????????????}
????????????}
????????????prev.onclick?=?function?()?{
????????????????if?(!animated){
????????????????????if?(index?==?1){
????????????????????????index?=?5;
????????????????????}
????????????????????else?{
????????????????????????index?-=?1
????????????????????}
????????????????????showButton();
????????????????????animate(600);
????????????????}
????????????}
????????????
????????????for?(var?i?=?0;?i?<?buttons.length;?i++){
????????????????buttons[i].onclick?=?function?()?{
????????????????????if?(this.className?==?'on'){
????????????????????????return;
????????????????????}
????????????????????var?myIndex?=?parseInt(this.getAttribute('index'));
????????????????????var?offset?=?-600?*?(myIndex?-?index);
????????????????????index?=?myIndex;
????????????????????showButton();
????????????????????if?(!animated){
????????????????????????animate(offset);
????????????????????}
????????????????}
????????????}
????????????container.onmouseover?=?stop();
????????????container.onmouseout?=?play();

????????}
????</script>
</head>

<body>
<div?id="container">
???<div?id="list"?style="left:-600px;">
???????<img?src="img/5.jpg"?alt="1">
????????<img?src="img/1.jpg"?alt="1">
????????<img?src="img/2.jpg"?alt="2">
????????<img?src="img/3.jpg"?alt="3">
????????<img?src="img/4.jpg"?alt="4">
????????<img?src="img/5.jpg"?alt="5">
????????<img?src="img/1.jpg"?alt="5">
????</div>
????<div?id="buttons">
???????<span?index="1"?class="on"></span>
????????<span?index="2"></span>
????????<span?index="3"></span>
????????<span?index="4"></span>
????????<span?index="5"></span>
????</div>
????<a?href="javascript:;"?id="prev"?class="arrow">&lt;</a>
????<a?href="javascript:;"?id="next"?class="arrow">&gt;</a>
</div>
</body>
</html>

以上是源碼；以下的簡略截圖。