javascript、html中的Ad旋转器样式图像循环器_Javascript_Html_Event Handling

javascript、html中的Ad旋转器样式图像循环器

javascript html

javascript、html中的Ad旋转器样式图像循环器,javascript,html,event-handling,Javascript,Html,Event Handling,我需要一些关于网络编程课程的javascript练习的帮助。我对“三巨头”还很陌生，所以我的理解还有些差距我的任务是为广告旋转器样式的图像幻灯片编写javascript代码。加载页面后，应显示一个图像，该图像每2秒循环显示一个新图像。最后，我想找到一个没有内联javascript的解决方案，但为了简单起见，我将javascript和HTML文件压缩成一个代码：图像周期函数ImageCycle（）{ displaypic=document.GetElementById（“displayp

我需要一些关于网络编程课程的javascript练习的帮助。我对“三巨头”还很陌生，所以我的理解还有些差距

我的任务是为广告旋转器样式的图像幻灯片编写javascript代码。加载页面后，应显示一个图像，该图像每2秒循环显示一个新图像。最后，我想找到一个没有内联javascript的解决方案，但为了简单起见，我将javascript和HTML文件压缩成一个

代码：


图像周期
函数ImageCycle（）{
displaypic=document.GetElementById（“displaypic”）；
var i=0；
while（true）{
开关（一）{
案例0：
displaypic.src=“pic1.jpg”；
打破
案例1：
displaypic.src=“pic2.png”；
打破
案例2://默认
displaypic.src=“pic3.jpg”；
违约：
i=-1；//重置迭代器
打破
}
setTimeout（函数（）{i++；}，2000）；
}
}

pic1.jpg

、

pic2.png

和

pic3.jpg

都是有效的文件名，与HTML文件位于同一目录中

问题： 在浏览器中加载页面时，不会显示任何图像。当我进行一点蛮力调试时，似乎根本没有调用ImageCycle，因为函数体中的其他语句似乎没有执行

我所尝试的：

将脚本标记移动到HTML文件中所有可能的位置
从外部文件链接脚本
ImageCycle的不同算法
将onload属性移动到img标记之前、之后和内部的其他标记
使用其他HTML属性调用ImageCycle

我需要知道的是：

如何使用HTML调用应始终在后台运行的javascript函数
用javascript编写此算法的最佳方法是什么
为什么我的方法失败了

var i=0；
displaypic=document.getElementById（“displaypic”）；
图像=[”https://via.placeholder.com/333/333/aa00ff", "https://via.placeholder.com/333/333/00aaff", "https://via.placeholder.com/333/333/00ffaa"];
函数ImageCycle（）{
displaypic.src=图像[i]；
setTimeout（函数（）{
if（i==images.length-1）{
i=1；
}否则{
i++；
}
ImageCycle（）
}, 2000);
}
ImageCycle（）

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Image Cycle</title>
      <!-- <script src = "RandomPicture.js"></script> -->
      <script>
        var displaypic;
        var pictures = [ "pic1", "pic2", "pic3"];
        var descriptions = [ "picture 1", "picture 2", "picture 3" ];
        var index = 0;

        function pickImage() {
           index = (index + 1) % pictures.length;
           displaypic.setAttribute( "src", pictures[ index ] + ".jpg" );
           displaypic.setAttribute( "alt", descriptions[ index ] );
        }

        function start() {
           displaypic = document.getElementById( "displaypic" );
           setInterval(function(){pickImage()},1000);
        } // end function start

        window.addEventListener('load', start);
      </script>
   </head>
   <body>
        <img id="displaypic" src="pic1.jpg" alt="picture 1"></img>
   </body>
</html>


图像周期
var-displaypic；
var pictures=[“pic1”、“pic2”、“pic3”]；
变量说明=[“图1”、“图2”、“图3”]；
var指数=0；
函数pickImage（）{
索引=（索引+1）%pictures.length；
displaypic.setAttribute（“src”，pictures[index]+“.jpg”）；
displaypic.setAttribute（“alt”，说明[索引]）；
}
函数start（）{
displaypic=document.getElementById（“displaypic”）；
setInterval（函数（）{pickImage（）}，1000）；
}//结束函数开始
window.addEventListener（“加载”，启动）；

使用window.AddEventListener（'load'，start）调用启动页面加载后立即运行的脚本
使用setInterval函数而不是setTimeout来获取给定的要定期运行的脚本
将脚本分为两个函数，start和pickImage；开始连续运行，每2秒调用一次pickImage


图像周期
常数时间延迟=2000/==2s
，displayPic=document.getElementById（'display-pic'）
，图片=
[{src:'264/500/300'，desc:'picture 1'}
，{src:'268/500/300'，desc:'picture 2'}
，{src:'273/500/300'，desc:'picture 3'}
]
;
var指数=0
，timeTarget=new Date（）.getTime（）+timeDelay
;
设置间隔（（）=>
{
现在让我们=new Date（）.getTime（）
如果（现在>=时间目标）
{
索引=++索引%pics.length
displayPic.src=`https://picsum.photos/id/${pics[index].src}.jpg`
displayPic.alt=pics[index].desc
}
},250);
displayPic.onload=（）=>
{
时间目标=新日期（）.getTime（）+时间延迟
}

const btPlayPause=document.getElementById（'bt-play-pause'））
，displayDelay=document.getElementById（'display-delay'））
，displayPic=document.getElementById（'display-pic'）
，图片=
[{src:'251'，desc:'picture 1'}
，{src:'252'，desc:'picture 2'}
，{src:'253'，desc:'picture 3'}
，{src:'254'，desc:'picture 4'}
，{src:'255'，desc:'picture 5'}
，{src:'256'，desc:'picture 6'}
]
;
显示延迟