container.onmouseover=play跟container.onmouseover=play()有什么区别？
来源：7-1 自动播放
CIPHER
2016-11-24 22:34
<!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"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>以上是源码；以下的简略截图。
这两个截图的代码有什么区别？
第一张图的代码，onmouseover跟onmouseout函数都可以执行（onmouseout函数是图片自动轮播，onmouseover是鼠标放上去之后停止轮播。）；
第二张图的代码，图片可以自动轮播，但是鼠标放上去之后，图片没有停止轮播。
play（）跟play有什么区别？
麻烦各位慕同学指点迷津！
谢谢！！
回答的都是帅哥 | 美女！^_^
写回答
关注
3回答
-
- 慕田峪6011835
- 2017-04-15 21:13:47
加括号返回值是执行函数后的返回值，不加括号返回的是整个函数信息
-
- rainy_li3676598
- 2016-12-06 16:21:14
如果你写stop(); 表示的是立即执行，不管你前面的条件有没有被触发。
但是如果写成 function () { stop();}， 就表示，你前面的条件执行了， 就开始执行函数， 函数就是里面的stop();
只用stop， 类似指针，指向的是stop();这个函数，
记住一条：如果你把函数名写全了， 就变成了立即执行，如果你是条件式的， 前面都要加function(){你要加的函数}， 或者只写一个函数名， 后面不要括号（前提是， 你的函数里面没有参数）
你可以写一个alert实验一下
-
- 10月7日
- 2016-11-26 10:38:49
没区别，只是少写和多写。
焦点图轮播特效
通过本教程学习您将能掌握非常实用的焦点图轮播特效的制作过程
65347 学习 · 638 问题
相似问题