Question

我正在研究一种在左侧和左侧转动图像，X方向的方法。右键单击。方向由数字控制，一些图像获得更多方向，然后是其他方向。这些方向在数组中，如下所示：0, 2, 4, 6, 8。始终跳2。

这些数字是由API获取的，所以我只需要将它们添加到这样的网址中，然后udpdate <img>标记。

api.domain.com/image.png?dir=0

大气压。我假设所有图片都从0开始，找到最后一位数字，并在左/右点击时加上/减去2。但问题是并非所有图像都从0开始，并非所有图像都遵循跳跃2的规则。意思是它会像这样：0, 6, 8。

我很想通过左/右按钮上的数组进行随机播放，但我不知道如何。谁可以帮助我？

脚本

var prev = $('#left');
var next = $('#right');
var image = $('#img');
var directions = '0, 2, 4, 6';

var max = directions[directions.length - 1];

// Turn Left
prev.click(function(){

    // Get current Direction
    var curDir = image.attr('data-direction');

    if(curDir >= 2){
        // Make new direction
        var newDir = parseInt(curDir) - parseInt(2);
        // Set new data-direcion
        image.attr('data-direction', newDir);
        // Find current image direction
        var url = image.attr('src');
        var fix = url.substring(url.lastIndexOf('=') + 1);
        // Set new image direction
        image.attr('src', url.slice(0,-1) + newDir);
    }
});
// Turn Right
next.click(function(){

    // Get current Direction
    var curDir = image.attr('data-direction');

    if(curDir <= max - 2){
        // Make new direction
        var newDir = parseInt(curDir) + parseInt(2);
        // Set new data-direcion
        image.attr('data-direction', newDir);
        // Find current image direction
        var url = image.attr('src');
        var fix = url.substring(url.lastIndexOf('=') + 1);
        // Set new image direction
        image.attr('src', url.slice(0,-1) + newDir);
    }
});

HTML

<img id="img" data-direction="0" src="api.domain.com/image.png?dir=0">

<button id="left">Left</button>
<button id="right">Right</button>

Answer 1

您可以在directions数组中的索引上使用模运算符（确保它是一个数组而不是字符串），并避免一些代码重复：

＆＃13;

var directions = '0, 2, 4, 6';
// Make directions an array instead of a string
directions = directions.split(', ');

function turn(dir) {
    var pos = directions.indexOf($('#img').attr('data-direction')),
        newPos = (pos + dir + directions.length) % directions.length,
        newDir = directions[newPos];
    
    $('#img').attr({
        "data-direction": newDir,
        src: $('#img').attr('src').replace(/\d+$/, newDir)
    });
    console.log("data-direction", newDir);
}

// Turn Left
$('#left').click(turn.bind(null, -1));
// Turn Right
$('#right').click(turn.bind(null, 1));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img" data-direction="0" src="api.domain.com/image.png?dir=0">

<button id="left">Left</button>
<button id="right">Right</button>

＆＃13;

点击按钮随机播放阵列

脚本

1 个答案: