                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /焦点图轮播特效

container.onmouseover=play跟container.onmouseover=play()有什么区别？

<!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>

以上是源码；以下的简略截图。