<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#d1 {
width: 500px;
height: 380px;
border: solid black 1px;
position: relative;
background: black;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload = function() {
var div = document.getElementById('d1');
var img = document.getElementById('img1');
var img_ = [1,2,3,4,5];
var counter = 1;
var left = 500;
img.onclick = function (){
function raz() {
if(counter < img_.length){
left-=10;
div.style.width = left + 'px';
if(left <= 0){
clearInterval(timer);
draw();
};
};
}var timer = setInterval(raz, 10);
var draw = function (){
var dddd = setInterval(imag, 10);
counter++;
img.src = 'images/'+counter+'.jpg';
function imag(){
left+=10;
div.style.width = left + 'px';
if(left >= 500){
clearInterval(dddd);
};
};
};
};
};
</script>
<body>
<div id="d1">
<img src="images/1.jpg" id="img1">
</div>
</body>
</html>