Javascript幻灯片与播放暂停和下一个上一个按钮
Javascript Slideshow with play pause and Next Prev button
我正在用Javascript制作幻灯片,带有播放/暂停和下一个/上一个。我已经设法使用播放/暂停按钮进行幻灯片放映,但现在我想添加下一个和上一个按钮。有人可以帮我怎么做。
这是我的 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML Slideshow</title>
<style type="text/css">
#slideshow {
margin: 50px auto;
position: relative;
width: 900px;
height: 450px;
padding: 10px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow > div > img {
width: 100%;
}
#button { text-align: center; }
</style>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</head>
<body>
<div id="slideshow">
<div>
<img name="slide" id="imgSlideshow" src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg">
</div>
</div>
<div id="button">
<a href="#" id="prevBtn" onclick="showPrev()">Prev</a>
<a href="#" id="startCycle" onclick="setTimer()">Play/Pause</a>
<a href="#" id="nextBtn" onclick="showNext()">Next</a>
</div>
</body>
</html>
这是JavaScript:
<script language="javascript" type="text/javascript">
var i = 0;
var path = new Array();
//var timer = setInterval("slide()",2000);
var timer;
// LIST OF IMAGES
path[0] = "http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg";
path[1] = "http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg";
path[2] = "http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg";
path[3] = "http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg";
function slide() {
document.getElementById("imgSlideshow").src = path[i];
i = (i + 1)%path.length;
//console.log(i);
}
function setTimer(){
if (timer) {
// stop
clearInterval( timer );
timer=null;
}
else {
timer = setInterval("slide()",2000);
}
}
var imgNumber = 1;
var numberOfImg = path.length;
function previousImage() {
if(imgNumber > 1) {
imgNumber--;
}
else {
imgNumber = numberOfImg;
}
document.getElementById("imgSlideshow").src = path[imgNumber-1];
changeCounter(imgNumber, numberOfImg);
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
else{
imgNumber = 1
}
document.getElementById("imgSlideshow").src = path[imgNumber-1];
changeCounter(imgNumber, numberOfImg);
}
function changeCounter(cur, total) {
document.getElementById("counter").innerHTML = cur + "/" + total;
}
document.getElementById("counter").innerHTML = 1 + "/" + path.length;
</script>
任何帮助都值得赞赏,并提前表示感谢。
只有逻辑上的微小变化。
var imgNumber = 0;
var path = ["http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg"
];
var numberOfImg = path.length;
var timer = null;
function slide() {
imgNumber = (imgNumber + 1) % path.length;
console.log(imgNumber);
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
}
function setTimer() {
if (timer) {
clearInterval(timer);
timer = null;
} else {
timer = setInterval(slide, 2000);
}
return false;
}
function previousImage() {
--imgNumber;
if (imgNumber < 0) {
imgNumber = numberOfImg - 1;
}
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
return false;
}
function nextImage() {
++imgNumber;
if (imgNumber > (numberOfImg - 1)) {
imgNumber = 0;
}
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
return false;
}
function changeCounter(cur, total) {
document.getElementById("counter").innerHTML = cur + "/" + total;
}
document.getElementById("counter").innerHTML = 1 + "/" + path.length;
#slideshow {
margin: 50px auto;
position: relative;
width: 900px;
height: 450px;
padding: 10px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow > div > img {
width: 100%;
}
#button {
text-align: center;
}
<div id="slideshow">
<div>
<img name="slide" id="imgSlideshow" src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg">
</div>
</div>
<div id="button">
<a href="#" id="prevBtn" onclick="return previousImage()">Prev</a>
<a href="#" id="startCycle" onclick="return setTimer()">Play/Pause</a>
<a href="#" id="nextBtn" onclick="return nextImage()">Next</a>
</div>
<div id="counter"></div>
相关文章:
- 当滑块只有一个图像时,如何禁用下一个/上一个按钮
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 下一个/上一个锚链接,如何在用户滚动时更新下一个/上一个链接
- Jquery UI选项卡&选择方框-下一个/上一个按钮
- 引导分页下一个上一个不起作用
- 使用“下一个”/“上一个”按钮切换图像
- 角度 - ng 网格通过分组按语法选择下一个/上一个项目
- 下一个/上一个 jQuery 控件类跳转了太多的列表项
- 显示带有缩略图和下一个/上一个按钮的图像
- 花式框下一个/上一个不显示 iframe
- j查询滑动选项卡:控制选项 - 下一个/上一个
- 如何将左/右箭头(下一个/上一个)功能添加到我的 jQuery 图像和文本滑块
- j查询带有下一个/上一个的 UI 选项卡
- 如何通过幻灯片查看活动箭头(下一个/上一个)
- 尝试运行下一个上一个按钮以播放列表媒体播放器代码中的视频,出现错误
- 修复了标题导航和滚动到()下一个/上一个元素
- 将下一个/上一个输入集中在达到最大长度或退格键上
- 数据表:禁用第一个下一个上一个最后一个,并在处理时显示/搜索记录
- 如何从简介.js工具提示中动态添加或删除下一个/上一个按钮
- Javascript幻灯片与播放暂停和下一个上一个按钮