Question

我为每个图像创建了数组，然后我使用另一个数组组合了图像，我希望将数组中的div移动到下一个图像。我需要一些JavaScript代码才能让我这样做。如果这有意义吗？

它们都是数组中图像的所有眼睛，因此下面的代码我正在展示给任何人一个想法。

<script type="text/javascript">
var move = 0;
//Step 1 : Create a new array for each pair of eyes i add
var eyes1 = new Array("100px", "0px 0px");
var eyes2 = new Array("100px", "-100px 0px");
var eyes3 = new Array("100px", "-200px 0px");
var eyes4 = new Array("100px", "-300px 0px");
var eyes5 = new Array("100px", "-400px 0px");
var eyes6 = new Array("100px", "-500px 0px");
var eyes7 = new Array("100px", "-600px 0px");
var eyes8 = new Array("100px", "-700px 0px");
var eyes9 = new Array("100px", "-800px 0px");
var eyes10 = new Array("100px", "-900px 0px");
var eyes11 = new Array("100px", "-1000px 0px");
var eyes12 = new Array("100px", "-1100px 0px");

//Step 2: add the pair of eyes from above to this array
var allEyes = new Array(eyes1, eyes2, eyes3, eyes4, eyes5, eyes6, eyes7, eyes8, eyes9, eyes10, eyes11, eyes12 );

...

Answer 1

请为您的问题添加更多详细信息，因为我不太清楚我明白您要做什么。根据您迄今为止提供的信息，这里有一些JavaScript循环遍历数组，并根据数组中的内容更改div标记的内容。我将其设置为每5秒循环一次，但您可以使用您想要的任何控制机制。

i = 0;

function loopImages(){
    document.getElementById('your_div_id').innerHTML = images[i%images.length];
    i++;
    setTimeout(loopImages, 5000);
}

Answer 2

这个怎么样

var eyesState = 0;
var eyes = [["100px", "0px 0px"]
            ["100px", "-100px 0px"],
            ["100px", "-200px 0px"],
            ["100px", "-300px 0px"],
            ["100px", "-400px 0px"],
            ["100px", "-500px 0px"],
            ["100px", "-600px 0px"],
            ["100px", "-700px 0px"],
            ["100px", "-800px 0px"],
            ["100px", "-900px 0px"],
            ["100px", "-1000px 0px"],
            ["100px", "-1100px 0px"]];
var eyesDiv = document.getElementById('eyes');
function eyesButtonOnClick(){
    eyesState = (eyesState+1)%eyes.length;
    //i am not sure what the first 100px are for
    //it might be the width of those eye then use something like
//  eyesDiv.style.width = eyes[eyeState][0];
    eyesDiv.style.backgroundPosition = eyes[eyesState][1];
}
//  bind this function to your button eg.
//  via button.onclick or per some js framework

Answer 3

如果这是你需要的（并且更简单），你收到的Vprimachenko答案也是一个很好的答案。这个问题需要更多细节。根据你在数组中的值，我怀疑你在一个长图像上有一个div，你希望在图像上移动div或使div保持静态并将图像作为div背景移动以仅显示一部分它在当时？后者对我更有意义，因为div保持在同一位置。

假设你的html页面中有一个div，如：

<div id="eyesState"></div>

和一个链接，点击以请求在div中显示图像的下一部分，如：

<a href="javascript:getNextPart();">Get the next part of the image</a>

然后您只需要显示长图像下一部分的javascript函数：

function getNextPart() {
    // This gets the content of your html div eyesState in the javascript function
    // for processing.
    var magicdiv = document.getElementById("eyesState");
    // This empties the div just in case it may not be empty already (if you are
    // already displaying some part of image... you want to remove this before placing
    // the next part of image otherwise it will display it on top of the prev image.
    magicdiv.innerHTML= "";
    // Since all you do is move the background image of the div, you need to set this
    // into the Style attribute of this div. Might need to set the Weight style too 
    // and others. Check out the img value below
    var backgroundimg = "background-position:" + allEyes[img][1];
    magicdiv.setAttribute("style", backgroundimg);
    // img basically tells you which next bit of image from your AllEyes array will be
    // displayed.
    if (img == AllEyes.length)
      img = 0;
    else
      img++ ; 
}

可能需要在函数外部将img设置为0.

用于读取图像数组的JavaScript代码

3 个答案: