2014-05-12 2 views
1

'속도 증가', '속도 감소'버튼 및 일시 중지/재생이있는 슬라이드 쇼를 만들어야합니다. 임이 힘들어 시간 초과/간격 사용과 혼동을 느낀다.슬라이드 쇼에 증가/감소 속도 버튼 추가

스크립트

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

답변

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; 
}; 
+0

이것은 매력처럼 작동합니다. 감사합니다. 금액에 상한선을 두어 증가 시키거나 감소 할 경우 특정 속도로 멈출 수 있다면 어떨까요? @ Infer-On – trev

+0

@trev min과 max를 지정하기 위해 2 var를 넣습니다. 방금 편집 한 – InferOn

1

어떻게 이런 일에 대해?

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); 
} 
관련 문제