个人中心
gpt4 book ai didi

javascript - 向幻灯片放映添加增加/减少速度按钮

转载 作者：行者123 更新时间：2023-11-30 17:28:54 24 4
gpt4 key购买 nike

我需要制作一个具有“加速”、“减速”按钮以及暂停/播放按钮的幻灯片。我很难过，对超时/间隔的使用感到困惑。

脚本:

// creates array and holds images
var imageArray = ['img/br1.jpg', 'img/br2.jpg', 'img/br3.png', 'img/br4.gif', 'img/br5.jpeg', 'img/br6.jpeg', 'img/br7.jpeg'];
// set the array to start at 0
var i = 0;

// create function 'slideShow'
function slideShow() {
// creates variable 'div' to load images into a div selected using 'getElementById'
var div = document.getElementById('slideshowdiv');
div.innerHTML = '<img src="' + imageArray[i] + '" />';

//increment i by 1
i++;

// checks if i is greater than or equal to the length
if(i >= imageArray.length) {
    // if true, resets value to 0
    i = 0;
};
// every 2 seconds change image
timer = setTimeout('slideShow()', 2000);
};


function stopShow() {
    clearTimeout(timer);
};
function playShow() {
    timer = setTimeout('slideShow()', 2000);
};
function increase() {

};
function decrease() {

};

html:

<body onload="slideShow();">
<div id="slideshowdiv"></div>
<div class="change">
<button onclick="stopShow()">Stop</button>
<button onclick="playShow()">Play</button>
<button onclick="increase()">Speed up slideshow</button>
<button onclick="decrease()">Slow down slideshow</button>
</div>

最佳答案

您可以尝试使用 var 更改固定值:

// creates array and holds images
var imageArray = ['img/br1.jpg', 'img/br2.jpg', 'img/br3.png', 'img/br4.gif', 'img/br5.jpeg', 'img/br6.jpeg', 'img/br7.jpeg'];
// set the array to start at 0
var i = 0;

var speed = 2000;
var minSpeed = 3000;
var maxSpeed = 0;

// create function 'slideShow'
function slideShow() {
// creates variable 'div' to load images into a div selected using 'getElementById'
var div = document.getElementById('slideshowdiv');
div.innerHTML = '<img src="' + imageArray[i] + '" />';

//increment i by 1
i++;

// checks if i is greater than or equal to the length
if(i >= imageArray.length) {
    // if true, resets value to 0
    i = 0;
};
// every 2 seconds change image
timer = setTimeout('slideShow()', speed);
};


function stopShow() {
    clearTimeout(timer);
};
function playShow() {
    timer = setTimeout('slideShow()', speed);
};
function increase() {
  if(speed -100 > maxSpeed )
    speed -= 100; 
};
function decrease() {
  if(speed +100 <= minSpeed)      
    speed += 100;
};

关于javascript - 向幻灯片放映添加增加/减少速度按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23617510/

24 4 0
文章推荐： php - 自定义 PHP 扩展
文章推荐： c# - WebClient.DownloadFile 究竟需要什么 URI？
文章推荐： c - dlopen 使用加载共享对象的默认路径
文章推荐： javascript - jQuery ajax post 无法发送 MVC 模型值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com