坚持使用Javascript幻灯片

时间:2015-09-22 09:41:25

标签: javascript

我从这个提示中获得的是我需要命名页面talent.html,然后弹出某种方框但警报只识别字符串,然后使用setInterval作为计时器并拥有一组图像,任何帮助弄清楚应该在这里做什么将不胜感激。

使用名为talent.html的Javascript对网页进行编码,并在主页上创建指向该网页的链接。利用您的想象力设计和编码包含下列功能的网页 - 代码这个JAVASCRIPT - 不是很精彩!编写代码使用以下技术: 页面首次显示时,会显示带问候语的提示框。它包含一张图片和标有&#34的按钮;开始播放" 单击该按钮时,将显示5张图片的幻灯片,每2秒自动旋转一次。 (提示,使用计时器)

<script>
function startShow(){
    window.setInterval("changeImage()", 2000);
}

function changeImage()
{   
var imgSrcs = new Array(5);
    imgSrcs[0] = new Image()
    imgSrcs[0].src = "Images/dog1.jpg";
    imgSrcs[1] = new Image()
    imgSrcs[1].src = "Images/dog2.jpg";
    imgSrcs[2] = new Image()
    imgSrcs[2].src = "Images/dog3.jpg";
    imgSrcs[3] = new Image()
    imgSrcs[3].src = "Images/dog4.jpg";
    imgSrcs[4] = new Image()
    imgSrcs[4].src = "Images/dog5.jpg";
var i = Math.floor((Math.random() * 3));
var element = document.getElementById("slideShow");
element.src= imgSrcs[i];
}
</script>
</head>

<body onLoad="startShow">

<p><img src="Images/dog1.jpg" alt="Dogs" id="slideShow"></p>
</body>

1 个答案:

答案 0 :(得分:0)

问题是您遗失()属性onload

<body onLoad="startShow">

试试这个例子:

function startShow() {
  window.setInterval(changeImage, 2000);
}

var imgSrcs = []; //create only once
imgSrcs.push('http://simpleicon.com/wp-content/uploads/light-bulb-14.png');
imgSrcs.push('http://www.innovateli.com/wp/wp-content/uploads/2015/04/bulb.png');
imgSrcs.push('http://images.clipartpanda.com/lightbulb-icon-lightbulb_shine-128.png');
imgSrcs.push('https://enterprise.cloudshark.org/www/img/iconmonstr-light-bulb-17-icon.svg');

function changeImage() {
  var i = Math.floor((Math.random() * imgSrcs.length));
  document.getElementById("slideShow").src = imgSrcs[i];
}
<body onLoad="startShow();">
  <p>
    <img src="http://simpleicon.com/wp-content/uploads/light-bulb-14.png" alt="Bulbs" id="slideShow" width="100">
  </p>
</body>