Question

我需要制作一张幻灯片，其中包含“提高速度”，“降低速度”按钮以及暂停/播放。我很难和超时/间隔使用混淆。

脚本：

// 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>

Answer 1

您可以尝试使用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;
};

Answer 2

这样的事情怎么样？

function playShow(playspeed) {
    timer = setTimeout('slideShow()', playspeed);
};
function increase() {

   var increase_to=10000;
   playshow(increase_to);

};
function decrease() {

    var decrease_to=100;
      playshow(decrease_to);
}

添加/减少速度按钮以进行幻灯片放映

2 个答案: