参考网上做的轮播图片javascript，为何不起作用？ - 编程论坛

#2

林月儿2016-01-29 20:51

路径指向问题吧

#3

林月儿2016-01-29 21:26

程序代码：

<!DOCTYPE html>
<html>
<head><title>Javascript Window</title>
<script type="text/javascript">
var Timer=self.setInterval("play()",1000);
var count=1;
function play()
{
    document.getElementById("pic").src="images/"+count+".jpg";
    count++;
    if(count>3)
        count=1;
}
function clearTimer()
{
      window.clearInterval(Timer);
}
function onMouseHover(obj)
{
    clearTimer();
      var index=parseInt(obj.value);
      document.getElementById("pic").src="images/"+index+".jpg";
      count=index;
}
function onMouseLeave()
{
      Timer=self.setInterval("play()",1000);
}
function init()
{
      var btns=document.getElementsByTagName("input");
      for(var i=0;i<btns.length;i++)
      {
         btns[i].onmouseout=onMouseLeave;
      }
}
</script>
</head>
<body onload="init()">
<img id="pic" src="images/1.jpg" width="500" height="300" /><br />
<input type="button" value="1" onmouseover="onMouseHover(this)" />
<input type="button" value="2" onmouseover="onMouseHover(this)" />
<input type="button" value="3" onmouseover="onMouseHover(this)" />

</body>
</html>

#4

qq10235692232016-01-29 23:09

回复 2楼林月儿

大神，你的代码可以运行，请明示路径指向问题是什么？是因为路径放在数组里面有问题？

程序代码：

<!DOCTYPE html>
<html>
<head>
<title>Image</title>
<meta charset="utf-8">
</head>
<body>
<img id="pic" src="images/1.jpg" width="500" height="300" /><br />
<input type="button" value="1" onmouseover="onMouseHover(this)" onmouseout="onMouseLeave()" />
<input type="button" value="2" onmouseover="onMouseHover(this)" onmouseout="onMouseLeave()" />
<input type="button" value="3" onmouseover="onMouseHover(this)" onmouseout="onMouseLeave()" />

<script type="text/javascript">
//var arrImage=new array("images/1.jpg","images/2.jpg","images/3.jpg");
var Timer=self.setInterval("play()",1000);
var count=1;
function play()
{
  if(count>3)  count=1;
  document.getElementById("pic").src="images/"+count+".jpg";
  count++;
}
function clearTimer()
{
  window.clearInterval(Timer);
}
function onMouseHover(obj)
{
  clearTimer();
  var index=parseInt(obj.value);
  document.getElementById("pic").src="images/"+index+".jpg";
  count=index;
}
function onMouseLeave()
{
  Timer=self.setInterval("play()",1000);
}
</script>
</body>
</html>

[此贴子已经被作者于2016-1-29 23:57编辑过]

#5

林月儿2016-01-31 19:20

恩，路径是小问题，访问权限才是大问题啦

#6

林月儿2016-01-31 19:21

数组是可以放的，你写的相对路径应该也没问题，是我一开始说错了吧，，，，能跑就好

#7

qq10235692232016-01-31 23:33

回复 6楼林月儿

论坛里好冷清，纵然你没有说清楚root case，但还是非常感谢你。

#8

林月儿2016-02-01 10:51

我是菜鸟啦，大虾那是你的qq吗

#9

qq10235692232016-02-01 11:37

回复 8楼林月儿

是啊，注册的时候没注意，这ID不好。

#10

keith1234562016-03-02 16:53

回复 6楼林月儿

function onMouseLeave()
{
Timer=self.setInterval("play()",1000);
}

如果这里使用局部变量var Timer = ...
当鼠标在buttom移动的时候，图片轮播的速度会变快？

#11

冰镇柠檬汁儿2016-03-02 23:44

冒昧的问一句，self.setInterval是个什么东东

#12

qq10235692232016-03-02 23:58

回复 11楼冰镇柠檬汁儿

其实self不要也可以，它好像表示当前页面。

#13

冰镇柠檬汁儿2016-03-03 08:58

这么长时间了，问题应该解决了吧

#14

qq10235692232016-03-03 09:09

严格说，还没有，你能帮忙看下一楼用数组放图片路径不能运行是为什么吗？

#15

冰镇柠檬汁儿2016-03-07 11:02

1楼的代码有两个很细小的问题

错误代码：var arrImage = new array("1.jpg", "2.jpg", "3.jpg");
正确代码：var arrImage = new Array("1.jpg", "2.jpg", "3.jpg");
要new Array对象，记得不是array，而是Array，大小写问题。

错误代码：var btns = document.getElementByTagName("input");
正确代码：var btns = document.getElementsByTagName("input");
这里有个拼写错误，getElementsByTagName，请注意Element后面是有个s的

#16

qq10235692232016-03-07 13:22

回复 15楼冰镇柠檬汁儿

哦，原来如此，感谢，更改后运行正常了。JavaScript出错不报错的行为真无语了。

[此贴子已经被作者于2016-3-7 13:39编辑过]

#17

冰镇柠檬汁儿2016-03-07 16:10

不是不报错，而是你不知道在哪里看。
对于普通用户，报错是很影响体验的，浏览器自动隐藏，是为了更好的用户体验。
而对于开发人员，只要在浏览器上按F12，就可以打开开发者工具，IE和谷歌都是自带的，FF需要插件，在工具里报错信息都有，建议用谷歌浏览器，比较好用