如何创建Javascript横幅在不同的时间切换图片
How do I create a Javascript banner switches pictures at different times?
我有一个横幅,里面有10张图片。我知道如何设置超时,以便图片每隔一定的秒切换一次,但我如何设置计时器,根据我希望单个图片显示的时间来更改图片。
例如:我希望图片1显示10秒,图片2显示3秒,图片3显示15秒。
到目前为止,这是我的代码:(它以5秒的相等间隔更改所有图像。
Javascript:
window.onload = rotate;
var thisAd = 0;
var adImages = new Array("Images1/Picture10","Images1/Picture1","Images1 /Picture2","Images1/Picture3","Images1/Picture4","Images1/Picture5","Images1/Picture6","Images1/Picture7","Images1/Picture8","Images1/Picture9");
function rotate(){
thisAd++;
if(thisAd == adImages.lengh){
thisAd = 0;
}
document.getElementById("adBanner").src = adImages[thisAd];
setTimeout(rotate, 5 * 1000);
}
制作一个时间数组来匹配您的图像。:
var adTimes = new Array(1000,5000,2000.....)
使用计时器中的值
setTimeout(rotate, 5 * adTimes[thisAd]);
您可以将图片存储到具有两个属性的对象中:一个用于URL,另一个用于延迟,然后使用它。
var adImages = [
{
url:"img1.png",
delay: 5
},
{
url:"img2.png",
delay: 3
}
];
然后你可以使用这些属性:
var image = adImages[thisAd];
document.getElementById("adBanner").src = image.url;
setTimeout(rotate, image.delay * 1000);
由于计时没有逻辑,因此无法创建通用算法。所以你必须为每个广告切换/else-if。
一个周期后,您还必须重置计数器thisAd
。
var time;
if(thisAd>9)thisAd=0;
if(thisAd==0)time=10;
else if(thisAd==1)time=3;
else if(thisAd==2)time=15;
...
setTimeout(rotate, time * 1000);
相关文章:
- 正在从帧创建时间代码
- 创建一个倒计时计时器脚本,该脚本计算声音文件的持续时间,而不是特定的日期
- 如何使用JavaScript创建时间计数器
- Firefox插件:保存到文本文件的HTTP日志,其中包含时间、用户名、计算机名;t创建文本文件
- 如何使用javascript在嵌入式youtube视频上创建可点击的时间戳链接
- 是否可以在javascript中访问
src的文件创建时间
- 尝试创建Javascript表单来计算结束时间
- 如何创建一个显示在窗口底部角落的DIV(经过一段时间后)
- 如何创建在特定时间重置的倒计时
- 创建一个等于yyyy-mm-dd 00:00:00或23:59:59的时间戳
- 创建程序以显示当前日期和时间
- 在 rails / html / js 中创建一个时间轴
- 时刻.js在特定时间创建弹出窗口
- 基于时间的 javascript,创建一个大约 30 分钟的空白响应
- 动态创建/限制随机时间的范围并转换为时间戳
- 基于 if-else 子句创建随机 UNIX 时间戳
- 创建JS播放儿童电影剪辑时间线
- 在 JavaScript 中,在循环中创建函数的具体原因是什么,可能会浪费计算时间
- 从使用时间字符串创建的momentjs对象返回日期对象或字符串
- 在设定的时间内创建功能阻滞剂