Question

我目前正在制作一个网站，该网站将有6个不同的图像，图像名称为mydice1，mydice2，mydice3，mydice4，mydice5和mydice6。

同样在我的assets / bilder / sekserspillet文件夹中，我的图像名称为die-NumberOfDice.gif 如何编辑此功能以执行以下操作：

当开始所有6个图像都是骰子（从1-6变化），一个接一个，从mydice1开始他们将停止滚动（也就是停止改变图像，然后回到原始图像），然后几秒钟之后，骰子mydice2的图像会做同样的事情等等。

简而言之：所有骰子在运行时都会改变图像，然后一个接一个地停止滚动并返回原始图像。

        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);
}

我的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">

Answer 1

几年前我回答a similar question。

以下是根据您的需求进行调整：http://jsfiddle.net/gaby/zZUgF/262/

不同之处在于我使用的是div个元素而不是图像，而且图像是一个精灵（，其中包含所有状态），因此骰子的所有状态都被加载到一次。

＆＃13;

$('#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);
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

js骰子6个图像并逐个停止

1 个答案: