I'm doing a frame by frame animation with Javascript by animating a sequence of images.
The code for the animation is quite simple.
My problem is, there can be a lot of images, presently 200 but can be up to 1000. Loading the images simultanely can take some times. I'd like to play the animation with 30 images initially and preload the remain in the background. But sometimes, the images take a time to load thus breaking the animation.
How can I pause the animation with a "buffering" and continue the animation when the next image is available ? Also how to skip the preloading when the images are already cached ? Could use some suggestion to improve the code.
HTML
<div class="video-stream">
<img alt="" src="images/stream/Calque-120.jpg" />
<img alt="" src="images/stream/Calque-121.jpg" />
<img alt="" src="images/stream/Calque-122.jpg" />
<img alt="" src="images/stream/Calque-123.jpg" />
<img alt="" src="images/stream/Calque-124.jpg" />
<img alt="" src="images/stream/Calque-125.jpg" />
<img alt="" src="images/stream/Calque-126.jpg" />
<img alt="" src="images/stream/Calque-127.jpg" />
<img alt="" src="images/stream/Calque-128.jpg" />
<img alt="" src="images/stream/Calque-129.jpg" />
<img alt="" src="images/stream/Calque-130.jpg" />
<img alt="" src="images/stream/Calque-131.jpg" />
<img alt="" src="images/stream/Calque-132.jpg" />
<img alt="" src="images/stream/Calque-133.jpg" />
<img alt="" src="images/stream/Calque-134.jpg" />
<img alt="" src="images/stream/Calque-135.jpg" />
<img alt="" src="images/stream/Calque-136.jpg" />
<img alt="" src="images/stream/Calque-137.jpg" />
<img alt="" src="images/stream/Calque-138.jpg" />
<img alt="" src="images/stream/Calque-139.jpg" />
<img alt="" src="images/stream/Calque-140.jpg" />
<img alt="" src="images/stream/Calque-141.jpg" />
<img alt="" src="images/stream/Calque-142.jpg" />
<img alt="" src="images/stream/Calque-143.jpg" />
<img alt="" src="images/stream/Calque-144.jpg" />
<img alt="" src="images/stream/Calque-145.jpg" />
<img alt="" src="images/stream/Calque-146.jpg" />
<img alt="" src="images/stream/Calque-147.jpg" />
<img alt="" src="images/stream/Calque-148.jpg" />
<img alt="" src="images/stream/Calque-149.jpg" />
</div>
CSS
.video-stream
{
position: relative;
}
.video-stream img
{
display: none;
height: auto;
left: 0;
max-width: 100%;
position: absolute;
top: 0;
vertical-align: top;
}
Javascript
var current = 0, // current playing image index
next = 1, // next image index to play
interval = 60, // animation speed
hide_delay = 1, // Delay to hide the current image
img_num = 200, // Total number of image
pack = 10, // Images being preloaded simultanely
idx_start = 149, // The images are index-suffixed so this is the index of the first image to preload
idx_end = 300; // index of the last image in the sequence
var load_more = function()
{
if(idx_start < idx_end)
{
// Preloading images
var temp = [],
temp_html = '';
for(var i = 0; i < pack && idx_start < idx_end; i++)
{
temp[i] = 'images/stream/Calque-' + (++idx_start) + '.jpg';
}
preloadPictures(temp, function()
{
$.each(temp, function(i, v)
{
temp_html += '<img src=' + v + ' />';
});
// Inject into dom
$('.video-stream').append(temp_html);
});
}
}
var play_stream = function()
{
$('.video-stream').find('img').eq(current).delay(interval).fadeOut(hide_delay)
.end().eq(next).delay(interval).hide().fadeIn(hide_delay, play_stream);
if(next < img_num - 1)
{
next++;
}
else
{
next = 0;
}
if(current < img_num - 1)
{
current++;
}
else
{
current = 0;
}
// Background preload
if(idx_start < idx_end)
{
load_more();
}
};
$(window).load(function()
{
play_stream();
});
This is a tricky way of doing it but here it is. You just need an array of images to pass through instead of my count;
var count = 0;
var buffer = 1;
var Vbuffer = 2;
setInterval(function() {
$('#img .' + buffer).prop('src', 'https://placeholdit.imgix.net/~text?txtsize=33&txt=' + count + '&w=150&h=150');
buffer = buffer % 3 + 1;
$('#img img').not('.' + Vbuffer).hide();
$('#img .' + Vbuffer).show();
Vbuffer = Vbuffer % 3 + 1;
count++;
}, 1000);
var buffer2 = 1;
var Vbuffer2 = 2;
var arrayOfImg = ['https://placeholdit.imgix.net/~text?txtsize=33&txt=one&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=two&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=three&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=four&w=150&h=150',
'https://placeholdit.imgix.net/~text?txtsize=33&txt=five&w=150&h=150'
]
var count2 = 0;
var arrayCount = arrayOfImg.length;
setInterval(function() {
$('#img2 .' + buffer2).prop('src', arrayOfImg[count2]);
buffer2 = buffer2 % 3 + 1;
$('#img2 img').not('.' + Vbuffer2).hide();
$('#img2 .' + Vbuffer2).show();
Vbuffer2 = Vbuffer2 % 3 + 1;
count2 = (count2 + 1) % arrayCount;
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
wait 3 seconds while the buffer loads
<div id='img'>
<img src='' class='1' />
<img src='' class='2' />
<img src='' class='3' />
</div>
<div id='img2'>
<img src='' class='1' />
<img src='' class='2' />
<img src='' class='3' />
</div>
EDIT
Added arrays to the results, so you can pass in an array of img sources to role through.
Related
I made this button, and added Math.floor(Math.random() * 2 + 1) to it to give wrong and correct randomly. and i added 5 images as lifes that whenever I get wrong one of the images will get hidden or removed. but I'm getting 2 problems:
the first one is that whenever an image gets deleted it wont stop and it deletes all the other images without returning to the math.random.
second problem is that when i get wrong answer it takes to clicks to start deleting the images.
I've been trying to fix it but I just couldn't figure it out!
you can run the code yourself and try it if you didnt understand what i ment!
if you do help, pleas explain to me what was the problem!!
var button1 = 1;
var span1 = document.getElementById("count1");
var span2 = document.getElementById("count2");
document.getElementById("button1").onclick = function() {
let btn1 = Math.floor(Math.random() * 2 + 1);
if (btn1 == 1) {
if (parseInt(span1.innerHTML) < 10)
span1.innerHTML = parseInt(span1.innerHTML) + 1;
} else if (parseInt(span2.innerHTML) < 5) {
let imageToDelete = 1;
document.getElementById("button1").onclick = function() {
document.getElementById("image_" + imageToDelete).style.visibility = "hidden";
imageToDelete++;
span2.innerHTML = parseInt(span2.innerHTML) + 1;
}
}
}
<input id="button1" type="button" value="click me?" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div id="output">
<img id="image_1" src="/images/person1.jpg">
<img id="image_2" src="/images/person1.jpg">
<img id="image_3" src="/images/person1.jpg">
<img id="image_4" src="/images/person1.jpg">
<img id="image_5" src="/images/person1.jpg">
</div>
<p id="p1">CORRECT: <span id="count1">0</span></p>
<p id="p2">ERROR: <span id="count2">0</span></p>
Something like this maybe?
//var button1 = 1;
var span1 = document.getElementById("count1");
var span2 = document.getElementById("count2");
var lives = document.getElementsByClassName("img");
var deads = 0;
document.getElementById("button1").onclick = function() {
if (deads >= 5) {
alert('no more lives');
return;
}
var rand = Math.random();
var sp1 = parseInt(span1.innerHTML);
var sp2 = parseInt(span2.innerHTML);
if (rand < .5 && sp1 < 10) {
if (deads > 0) deads--;
sp1++;
span1.innerHTML = sp1;
lives[deads].style.visibility = 'visible';
} else {
sp2++;
span2.innerHTML = sp2;
lives[deads].style.visibility = 'hidden';
deads++;
}
}
<input id="button1" type="button" value="click me?" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div id="output">
<img id="image_1" class='img' src="/images/person1.jpg">
<img id="image_2" class='img' src="/images/person1.jpg">
<img id="image_3" class='img' src="/images/person1.jpg">
<img id="image_4" class='img' src="/images/person1.jpg">
<img id="image_5" class='img' src="/images/person1.jpg">
</div>
<p id="p1">CORRECT: <span id="count1">0</span></p>
<p id="p2">ERROR: <span id="count2">0</span></p>
I am trying to develop interactive 3d viewer with Rotation and Zoom using Java script. I successfully developed a script to view product which rotates only in one axis(X-axis), but need script sample to view product which is taken in X,Y and Z axis. I have attached an image which shows camera placements.
Fig-1 Sample Camera placement
Fig -1 Shows camera positions where images are taken in single axis, This is achieved and below is the code.
<html>
<head>
<style type="text/css">
table img {
height: 250px;
width: 250px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var arr = new Array();
var xCurrent = 0;
var currentImgPos = 0;
$("#dvImages img").each(function () {
arr.push($(this).attr("src"));
});
$("#product").attr("src", arr[0]);
$("#product").mouseleave(function () { xCurrent = 0; });
$("#product").mousemove(function (e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
if (xCurrent > relX) {
if (relX - xCurrent <= -5) {
if (currentImgPos >= 25) {
currentImgPos = 0;
$("#product").attr("src", arr[currentImgPos]);
}
else {
currentImgPos = currentImgPos + 1;
$("#product").attr("src", arr[currentImgPos]);
}
xCurrent = relX;
}
}
else {
if (relX - xCurrent >= 5) {
if (currentImgPos <= 0) {
currentImgPos = 25;
$("#product").attr("src", arr[currentImgPos]);
}
else {
currentImgPos = currentImgPos - 1;
$("#product").attr("src", arr[currentImgPos]);
}
xCurrent = relX;
}
}
});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="" src="" id="product" />
</td>
</tr>
</table>
<div id="dvImages" style="display: none">
<img alt="" src="http://www.mathieusavard.info/threesixty/1.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/5.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/9.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/13.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/17.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/21.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/25.jpg" />
</div>
</body>
</html>
Fig-2 New Camera placement
Fig -2 Shows camera positions where images are taken in X,Y and Z axis. Need sample code this part
<img src="http://localhost/wp-content/uploads/2018/01/sample-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84bdg" style="display:block">
<img src="http://localhost/wp-content/uploads/2018/05/poqn-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84xjz">
<img src="http://localhost/wp-content/uploads/2018/05/kpth-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84yrh">
<img src="http://localhost/wp-content/uploads/2018/05/dtyh-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84gpl">
<img src="http://localhost/wp-content/uploads/2018/05/gymr-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84dzo">
Is there anymethod to rotate thumbnails on mouse hover every second with javascript like many video tube sites?
I have a video gallery and I have multiple thumbs option but I dont know if its possible to change every second the images listed above.
Here is a possible solution :
var i = 0;
var tid = null;
var sec = 1/3; // <- you want 1 here
var images = $("img").map(function () {
return $(this).attr("src");
}).get();
$("img:gt(0)").remove();
$("img").hover(function () {
var $this = $(this);
tid = setInterval(function () {
i = (i + 1) % images.length;
$this.attr("src", images[i]);
}, 1000 * sec);
}, function () {
clearInterval(tid);
$(this).attr("src", images[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
<img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
<img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
<img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
<img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
As an alternative, you could switch between a static GIF and an animated GIF :
var gif = "https://i.stack.imgur.com/1IpaB.gif";
var agif = "https://i.stack.imgur.com/yYrPT.gif";
$("img").hover(function () {
$(this).attr("src", agif);
}, function () {
$(this).attr("src", gif);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img height="150" src="https://i.stack.imgur.com/1IpaB.gif">
To make the GIF that you can see in the above code snippet, I have converted a WEBP image from Youtube thanks to this online tool : https://ezgif.com/webp-to-gif.
You can do it like following...
<style type="text/css">
.mvThumbs {
position: relative;
}
.mvThumbs .mvThumb {
position: absolute;
left: 0;
top: 0;
}
</style>
<div class="mvThumbs">
<img src="http://lorempixel.com/400/200/sports/1/" class="mvThumb" alt="" title="" id="thumb_i84bdg">
<img src="http://lorempixel.com/400/200/sports/2/" class="mvThumb" alt="" title="" id="thumb_i84xjz">
<img src="http://lorempixel.com/400/200/sports/3/" class="mvThumb" alt="" title="" id="thumb_i84yrh">
</div>
<script type="text/javascript">
$('.mvThumbs img:gt(0)').hide();
$(".mvThumbs").hover(function() {
window.timer = setInterval(function() {
$('.mvThumbs :first-child').fadeOut().next('img').fadeIn().end().appendTo('.mvThumbs');
}, 1000);
}, function() {
clearInterval(window.timer);
});
</script>
Use a setInterval that gets added on mouseenter and cleared on mouseleave, something like this:
let hoverInterval;
let visibleIndex = 0;
const container = document.querySelector('#container');
container.addEventListener('mouseover', () => {
hoverInterval = setInterval(() => {
container.children[visibleIndex].style.display = 'none';
visibleIndex++;
container.children[visibleIndex].style.display = 'block';
}, 1000);
});
container.addEventListener('mouseleave', () => clearInterval(hoverInterval));
<div id="container">
<img src="http://localhost/wp-content/uploads/2018/01/sample-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84bdg" style="display:block">
<img src="http://localhost/wp-content/uploads/2018/05/poqn-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84xjz" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/kpth-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84yrh" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/dtyh-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84gpl" style="display:none">
<img src="http://localhost/wp-content/uploads/2018/05/gymr-218x147.png" class="mvThumb" alt="" title="" id="thumb_i84dzo" style="display:none">
</div>
below is my code,In this 1 to 15 image and this image load one by one to 15 and again start from 1 to 15 in specific time interval. In this sequence images play infinitely when page is load but i want images play at only once when page is load.
and I can't fixed this bug please help me out to solve this problem.
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
<div id="animation">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png">
</div>
#pratik, this should help you:
You should use clearInterval like below:
if(j === 15) {
clearInterval(interval);
}
Example
onload = function startAnimation() {
var animDiv = document.getElementById('animation');
var x = document.createElement("IMG");
x.setAttribute("id", 'test');
x.setAttribute("src",
"http://jumpingfishes.com/dancingpurpleunicorns/charging01.png");
animDiv.appendChild(x);
var i = 1,
j = 2;
var interval = setInterval(function () {
var y = (i < 10) ? '0' + i.toString() : i.toString(),
z = (j < 10) ? '0' + j.toString() : j.toString(),
url = document.getElementById('test').src;
document.getElementById('test').src = url.replace(y, z);
i++;
j++;
if (j === 16) {
clearInterval(interval);
}
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
<div id="animation">
</div>
You should use clearInterval();
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
var myInterval=setInterval(function () {
if(i==frameCount-2){
clearInterval(myInterval);
}
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
<div id="animation">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
You have to clear your interval once you want it to stop running. Using clearInterval().
Check this example:
Note that intervalEnd is the number that once the i reaches it, will clear your interval.
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
var intervalEnd = 100;
var intervalId = setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
if (i >= intervalEnd)
clearInterval(intervalId)
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
<div id="animation">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
Im currently making a site that will have 6 different images with the image name mydice1, mydice2, mydice3 , mydice4, mydice5 and mydice6.
also in my assets/bilder/sekserspillet folder i have dices image with the name die-NumberOfDice.gif
How can i edit this function to do the following:
when starting all of the 6 images are diceing ( changing from 1-6), one after one, starting with mydice1 they will stop rolling ( aka stop changing images, and get back to the original image), then a few secs later, the image with dice mydice2 will do the same, etc.
so in short:
all dices are changing images when running, and then one by one, they will stop rolling and get back to the original image.
function throwdices() {
var spins = spins;
var curSpin = 0;
var spinInterval = setInterval(function() {
curSpin++;
if (curSpin < spins) {
var randomdices=Math.round(Math.random()*4.5);
document.images["mydice1"].src="assets/bilder/sekserspillet/die-"+randomdices+".gif";
} else {
clearInterval(spinInterval);
throwdice();
}
}, 500);
}
my html:
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[0]?>.gif" width="45px" height="45px" name="mydice1">
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[1]?>.gif" width="45px" height="45px" name="mydice2">
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[2]?>.gif" width="45px" height="45px" name="mydice3">
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[3]?>.gif" width="45px" height="45px" name="mydice4">
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[4]?>.gif" width="45px" height="45px" name="mydice5">
<img src="assets/bilder/sekserspillet/die-<?echo $terninger[5]?>.gif" width="45px" height="45px" name="mydice6">
Some years ago i had answered a similar question.
Here is an adaptation for your needs: http://jsfiddle.net/gaby/zZUgF/262/
The difference is that i am using div elements instead of images, and the image is a sprite (with all states inside it) so that all states of the dice are loaded at once.
$('#throw').click(function () {
$('.dice').each(function(index){
throwAnimatedDice( this, index );
});
});
function throwAnimatedDice(elem, spins) {
var value = Math.round(Math.random() * 5) + 1;
displayDice(10 + (spins*5), value, $(elem));
return value;
}
function displayDice(times, final, element) {
element.removeClass();
if (times > 1) {
element.addClass('dice dice_' + (Math.round(Math.random() * 5) + 1));
setTimeout(function () {
displayDice(times - 1, final, element);
}, 100);
} else element.addClass('dice dice_' + final);
}
.dice {
background-image:url('http://www.clker.com/cliparts/e/7/4/4/1194991183406177705six-sided_dice_faces_lio_01.svg.med.png');
height:49px;
width:49px;
display:inline-block;
margin:5px;
}
.dice_1 {
background-position:0px 0px;
}
.dice_2 {
background-position:-50px 0px;
}
.dice_3 {
background-position:-101px 0px;
}
.dice_4 {
background-position:-151px 0px;
}
.dice_5 {
background-position:-201px 0px;
}
.dice_6 {
background-position:-251px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dice dice_6"></div>
<div class="dice dice_6"></div>
<div class="dice dice_6"></div>
<div class="dice dice_6"></div>
<div class="dice dice_6"></div>
<div class="dice dice_6"></div>
<br />
<br />
<button id="throw">throw dice</button>