Question

我有下面的代码叫做onclick，并希望能够在几秒钟后显示第二个图像，具体取决于从数组中选择哪一个 - 例如，如果显示了1.png，那么我想要显示1s.png，2.png然后显示2s.png等

    function displayImage () {
            var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
            var l = img_name.length;
            var rnd_no = Math.floor(l*Math.random());
            document.getElementById("imgHolder").src = img_name[rnd_no];
            }

如何确定从阵列中选择哪个图像然后再用于其他功能？

Answer 1

要知道函数是否第一次运行，你需要一个全局变量。

inject controller in another module

演示：http://jsbin.com/kanejugahi/edit?html,js,console,output

此外，使数组全局化将使您的功能更有效。

希望这有帮助，

Answer 2

我认为您了解Functions在JavaScript中的工作方式以及范围的工作原理非常重要。

您需要做的是，您需要公开该信息，以便两个功能都可以访问。您已经定义了图像数组，并且您已经确定了随机数，因此只需在函数外部声明它们即可使它们可用，因此现在这些变量可用。在全球范围内定义变量通常是不好的做法，但这仅仅是为了教学。

＆＃13;

var selectedImage; // defined outside so it is available for other functions

function displayImage() {
  var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
  var rnd_no = Math.floor(img_name.length * Math.random());
  selectedImage = img_name[rnd_no];
  document.getElementById("imgHolder").src = selectedImage;
}

function anotherFunction() {
  console.log(selectedImage);
}

＆＃13;

Answer 3

据我所知，你可以使用return并使图像数组全局化。

var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
var img_class = '';
//this function will return the index of the image in array
function displayImage () {
   var l = img_name.length;
   var rnd_no = Math.floor(l*Math.random());
   document.getElementById("imgHolder").src = img_name[rnd_no];
   return rnd_no;
}

var nextimage;
function showImages(){
     //your logic to show the next image here
     nextimage = (displayImage ()+1)%img_name.length;
     var myVar = setInterval(function(){
     if(img_class==''){
        document.getElementById("imgHolder").src = img_name[nextimage];
        img_class = 's';
     }else{
        var img_arr = img_name[nextimage].split(".");
        if(img_arr.length===2){
           document.getElementById("imgHolder").src = img_arr[0]+"s."+img_arr[1];
        }

        img_class = '';
        nextimage = (nextimage+1)%img_name.length;
     }


   }, 1000);
}

＆＃13;

var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
    var img_class = '';
    //this function will return the index of the image in array
    function displayImage () {
    var l = img_name.length;
    var rnd_no = Math.floor(l*Math.random());
    document.getElementById("imgHolder").src = img_name[rnd_no];
    return rnd_no;
    }

    var nextimage;
    function showImages(){
        //your logic to show the next image here
        nextimage = (displayImage ()+1)%img_name.length;
        var myVar = setInterval(function(){
        if(img_class==''){
            document.getElementById("imgHolder").innerHTML = img_name[nextimage];
            img_class = 's';
        }else{
            var img_arr = img_name[nextimage].split(".");
            if(img_arr.length===2){
            document.getElementById("imgHolder").innerHTML = img_arr[0]+"s."+img_arr[1];
            }

            img_class = '';
            nextimage = (nextimage+1)%img_name.length;
        }


    }, 1000);
    }
    showImages();

＆＃13;

<div id="imgHolder"></div>

＆＃13;

Answer 4

可能是这样的吗？

var images = ["images/1.png", "images/2.png", "images/3.png"];
function displayImage () {
    var dom = document.getElementById("imgHolder");
    if ( images.indexOf(dom.src) >=0 ) {
        dom.src = dom.src.replace(".png", "s.png"); // Seems like a stupid way to do this
        return;
    }
    var l = images.length;
    dom.src = images[Math.floor(l*Math.random())];
}

如何确定从数组中调用哪个值，以便在另一个函数中使用？

4 个答案: