Javascript 添加下一个/前进和上一个/快带
Javascript Add next/forward and previous/rewind
我有这个javascript幻灯片,它与暂停/播放选项一起工作得很好:
<html>
<head>
<title>Simple Javascript Slideshow</title>
<script type="text/javascript">
var i = 0, imgsrc = new Array(), preload = new Array();
imgsrc[0]="photos/image1.png";
imgsrc[1]="photos/image2.png";
imgsrc[2]="photos/image3.png";
for (var j=0;j<imgsrc.length;j++)
{
preload[j] = new Image;
preload[j].src = imgsrc[j];
}
function mode(param)
{
smode=param;
}
function startSlideshow()
{
if(smode=="play")
{
document.getElementById("play").disabled="disabled";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("slideshow").src=imgsrc[i];
i++;
setTimeout("startSlideshow()",1000);
}
else if(smode=="pause")
{
document.getElementById("pause").disabled="disabled";
document.getElementById("play").disabled="";
document.getElementById("play").value="Resume";
}
else if(smode=="stop")
{
document.getElementById("play").disabled="";
document.getElementById("play").value="Play";
document.getElementById("pause").disabled="disabled";
document.getElementById("stop").disabled="disabled";
document.getElementById("slideshow").src=imgsrc[0];
i=0;
}
if(i==imgsrc.length)
{
i=0;
}
}
</script>
</head>
<body>
<img id="slideshow" src="photos/Aanimation-ir001.png" />
<br />
<input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();" />
<input id="pause" type="button" value="Pause" disabled="disabled"
onclick="mode('pause');startSlideshow();" />
<input id="stop" type="button" value="Stop" disabled="disabled"
onclick="mode('stop');startSlideshow();" />
</body>
</html>
最好有一个快退/前进(下一个/上一个图像)选项与暂停选项一起使用。
这可能吗?
亲切问候
你应该能够用你当前的代码弄清楚。
这里有一些提示:
当前显示的图像由以下定义:
document.getElementById("slideshow").src=imgsrc[i];
如果当前显示的图像有索引i
,下一个图像的索引是什么?前一个呢?
一旦解决了这个问题,你必须将你的新函数(或现有函数的新大小写)绑定到你的HTML标记,就像你在这里所做的那样:
<input id="next" type="button" value="Next" onclick="mode('next');" />
作为旁注,您应该注意,如果您显示最后一个(或第一个)图像并按下一个(或上一个)会发生什么。
希望有帮助。
我想我现在明白了:
这是我为转发选项得到的:
if(smode=="next")
{
document.getElementById("play").disabled="";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("next").disabled="";
document.getElementById("slideshow").src=imgsrc[i++];
}
而对于落后的:
if(smode=="pre")
{
document.getElementById("play").disabled="";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("next").disabled="";
document.getElementById("slideshow").src=imgsrc[i--];
}
为了避免从 0 到 -1、-2 等,我得到了这个:
if(i==-1){
i = 23;
}
但是:当我向后按时,它在第一次点击时向前,然后在第二次点击时向后?
问候
相关文章:
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 如何将值传递到上一个html页面
- Javascript获取上一个元素的内容
- 禁用旋转木马中的下一个按钮和上一个按钮
- 引用vue.js中v-for中的上一个值
- DOM导航-上一个同级未定义
- 构建JS测试,警报窗口重复上一个Q,而不是问下一个Q
- 如何在用户返回和上一个按钮时刷新下拉列表
- 删除“;上一个“;以及“;下一个“;基于当前幻灯片
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- HTML5历史记录-返回上一个完整页面按钮
- 算法:从数组(javascript/angular)中按当前日期获取上一个和下一个事件
- 如何选择给定类的上一个元素
- 用键盘分页jQuery下一个和上一个控件.触发器('点击')不'不起作用
- 如何使请求等待上一个请求完成
- 当我单击下一个或上一个按钮时,datatable显示旧值
- Javascript 添加下一个/前进和上一个/快带
- 如果下一个和上一个按钮点击得太快,为什么这个简单的内容滑块会偏离轨道?
- 美元.widget是一个不带blueimp的功能,jQuery文件上传断断续续