当我们使用JavaScript点击下一个或上一个按钮时,图像幻灯片播放计时器的速度会加快
Image slideshow timer speed getting increased when we click on next or previous buttons, using JavaScript
我已经使用JavaScript编写了简单的图像滑块。在这方面,我设置了5000毫秒的定时器自动滑动。但当我们点击下一个或上一个按钮时,它会增加。我已经在下面粘贴了代码
HTML代码:
<section id="intro">
<div id="prev"><br/><br/><br/><br/><img onclick="rotateImages(0);" src="./images/slider/prev1.png"/></div>
<div id="next"><img onclick="rotateImages(1);" src="./images/slider/next1.png"/></div>
</section>
JavaScript代码:
<script type="text/javascript">
var num = 0;
var temp = 0;
var speed = 5000;
var preloads = [];
preload(
'1.png',
'2.jpg',
'3.jpg',
'4.jpg',
'5.png'
);
function preload() {
for (var c = 0; c < arguments.length; c++) {
preloads[preloads.length] = new Image();
preloads[preloads.length - 1].src = arguments[c];
}
}
function rotateImages(flag) {
if (flag == 0)
{
num = num - 1;
if (num < 0)
num = preloads.length;
}
else
{
num = num + 1;
if (num >= preloads.length)
num = 0;
}
if (num == temp) {
rotateImages(1);
} else {
var str = preloads[num].src;
var resArr = str.split("/");
var picName = resArr[resArr.length - 1];
document.getElementById("intro").style.backgroundImage = 'url(./images/slider/' + picName + ')';
temp = num;
setTimeout(function () {
rotateImages(1)
}, speed);
}
}
if (window.addEventListener) {
window.addEventListener('load', function () {
setTimeout(function () {
rotateImages(1)
}, speed)
}, false);
} else {
if (window.attachEvent) {
window.attachEvent('onload', function () {
setTimeout(function () {
rotateImages(1)
}, speed)
});
}
}
</script>
您需要清除上一个计时器。否则,每次调用rotateImages()都会添加新的计时器,保存从setTimeout()返回的引用,然后如果计时器设置为,则使用clearTimeout(
var num = 0;
var temp = 0;
var speed = 5000;
var preloads = [];
var timeout;
preload(
'1.png',
'2.jpg',
'3.jpg',
'4.jpg',
'5.png'
);
function preload() {
for (var c = 0; c < arguments.length; c++) {
preloads[preloads.length] = new Image();
preloads[preloads.length - 1].src = arguments[c];
}
}
function rotateImages(flag) {
if (flag == 0) {
num = num - 1;
if (num < 0)
num = preloads.length;
} else {
num = num + 1;
if (num >= preloads.length)
num = 0;
}
if (num == temp) {
rotateImages(1);
} else {
var str = preloads[num].src;
var resArr = str.split("/");
var picName = resArr[resArr.length - 1];
document.getElementById("intro").style.backgroundImage = 'url(./images/slider/' + picName + ')';
temp = num;
if (!!timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
rotateImages(1);
}, speed);
}
}
if (window.addEventListener) {
window.addEventListener('load', function() {
setTimeout(function() {
rotateImages(1)
}, speed)
}, false);
} else {
if (window.attachEvent) {
window.attachEvent('onload', function() {
setTimeout(function() {
rotateImages(1)
}, speed)
});
}
}
相关文章:
- 我可以使此幻灯片图像自动播放吗?
- 使用jQuery无限循环播放HTML页面幻灯片
- 需要帮助自定义幻灯片自动播放
- 吸引人 - html5 导出添加了带有播放按钮的第一张幻灯片
- 我怎么能自动使用JavaScript函数来自动播放幻灯片呢
- 当我们使用JavaScript点击下一个或上一个按钮时,图像幻灯片播放计时器的速度会加快
- 在同一页面上播放多个幻灯片
- 如何在视图中自动播放幻灯片
- 整页.js - 在背景视频循环播放时向右移动幻灯片
- 在仅幻灯片 JavaScript 上添加播放/暂停按钮
- jquery超大需要在播放幻灯片后重新加载页面
- Javascript幻灯片与播放暂停和下一个上一个按钮
- 整页.js自动播放幻灯片
- 专门用于文本的幻灯片/不断播放/但带有“后退”,“停止”和“前进”按钮的图像文件
- 添加自动播放 jquery 幻灯片
- JQuery 幻灯片错误.图片在页面上列出,而不是随机播放.找不到错误
- Javascript自动播放幻灯片
- 如何添加/删除'prev'和'接下来'类在Bootstrap中循环播放幻灯片
- 单击时水平播放幻灯片动画
- Jquery暂停/播放幻灯片