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

编程论坛 → WEB开发 → 『 JavaScript论坛』 → 参考网上做的轮播图片javascript，为何不起作用？

标题：参考网上做的轮播图片javascript，为何不起作用？

只看楼主

qq1023569223

来　自：湖南科技大学
等　级：贵宾
威　望：26
帖　子：2753
专家分：13404
注　册：2010-12-22
结帖率：100%

楼主

已结贴√ 问题点数：50 回复次数：16

参考网上做的轮播图片javascript，为何不起作用？

程序代码：

<!DOCTYPE html>
<html>
<head><title>Javascript Window</title></head>
<body onload="init()">
<img id="pic" src="2.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)" />

<script type="text/javascript">
var arrImage=new array("1.jpg","2.jpg","3.jpg");
var Timer=self.setInterval("play()",1000);
var count=0;
function play()
{
  if(arrImage.length==count)  count=0;
  document.getElementById("pic").src=arrImage[count];
  count++;
}
function clearTimer()
{
  window.clearInterval(Timer);
}
function onMouseHover(obj)
{
  clearTimer();
  var index=parseInt(obj.value);
  document.getElementById("pic").src=arrImage[index-1];
  count=index;
}
function onMouseLeave()
{
  Timer=self.setInterval("play()",1000);
}
function init()
{
  var btns=document.getElementByTagName("input");
  for(var i=0;i<btns.length;i++)
  {
     btns[i].onmouseout=onMouseLeave;
  }
}
</script>
</body>
</html>

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

2016-01-29 10:20

林月儿

来　自：湖南
等　级：版主
威　望：138
帖　子：2276
专家分：10647
注　册：2015-3-19

第 2 楼

得分:0

路径指向问题吧

剑栈风樯各苦辛，别时冰雪到时春

2016-01-29 20:51

林月儿

来　自：湖南
等　级：版主
威　望：138
帖　子：2276
专家分：10647
注　册：2015-3-19

第 3 楼

得分:50

程序代码：

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

剑栈风樯各苦辛，别时冰雪到时春

2016-01-29 21:26

qq1023569223

来　自：湖南科技大学
等　级：贵宾
威　望：26
帖　子：2753
专家分：13404
注　册：2010-12-22

第 4 楼

得分:0

回复 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>