<html>
<head>
<script>
window.onload = function (){
viewWin = document.getElementById('view');
imgArray = [];
for(var n=0;n<6;n++)
{
imgArray[n]=document.getElementById(n);
}
viewImg = document.createElement('img');
viewImg.height = 300;
viewImg.width = 450;
if(!viewImg.src){
viewImg.src = imgArray[0].src;
}
viewWin.appendChild(viewImg);
viewImg.id = 'viewImg';
for(var i = 0; i < imgArray.length; i++){
imgArray[i].onclick = function(){
viewImg.src = this.src;
}
}
}
function play(){
if(document.getElementById('stop').onClick)
clearTimeout(joo);
var duration = 12; //общая длительность
var start = new Date().getSeconds(); // время старта
joo = setTimeout(function (){
var now = (new Date().getSeconds()) - start;
if(now > start)
var now = start - (new Date().getSeconds());
progress = now/duration;
document.getElementById('viewImg').setAttribute('src',imgArray[now-1].src);
if(progress < 1)
setTimeout(arguments.callee, 1000);
}, 1000);
}
</script>
<style>
#view{
height: 300px;
width: 450px;
border: 1px solid #000;
margin-bottom: 30px;
}
#preview img{
height: 100px;
width: 150px;
}
</style>
</head>
<body>
<div id="view"></div>
<div id="preview">
<img id="0" src="1.jpg" />
<img id="1" src="2.jpg" />
<img id="2" src="3.jpg" />
<div>
<img id="3"src="4.jpg" />
<img id="4" src="5.jpg" />
<img id="5"src="6.jpg" />
</div>
</div>
<br>
<br>
<br>
<div>
<input id="start" type="button" value="Запуск" onClick="play()" >
<br>
<div><input id="stop" type="button" value="Остановка"></div>
</div>
</body>
</html>
помогите кнопку стоп сделать буду очень благодарен
P.S. Не знаю почему так код выдает... не знаю с чем это связано
