Question

尝试制作使用background-image：属性的幻灯片。这是我到目前为止所拥有的。

<div id="headerContent">
        <div id="rightArrow"></div><!-- end of rightArrow-->
        <div id="leftArrow"></div><!-- end of leftArrow-->
    </div><!-- end of headerContent-->

document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');

document.getElementById("rightArrow").addEventListener("click", changeImageRight);


function changeImageRight () {
    var i = 0;

    if(i == 0) {
        document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');
        i++;
    }
    else if (i == 1)
     {
        document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-2.png) no-repeat !important');
        i++;
    }
    else if (i == 2) {
        document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-3.png) no-repeat !important');
        i++;
    }
    else {
        document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');
        i++;
    }

}

你可以看到我增加i ++来改变背景图像。但是，就目前而言，这没有任何作用，也没有显示图像。我包含了！important属性，因为这是我可以在开始时显示占位符img的唯一方法。

Answer 1

也许你应该更多地考虑这个：

private static void createFile() {

    if(pub_f != null)
    {
        System.out.println("file already exists");
    }   
    try 
    {
        pub_f = new RandomAccessFile("file.bin", "rw");
        pub_f.setLength(10*1024);
    }
    catch (IOException e) 
    {
        System.out.println("fail to open file. Exception message: " + e.getMessage());
        e.printStackTrace();
    }

    if(f == null)
    {
        System.out.println("fail to open file");
    }   
    else
    {
        System.out.println("file created");
    }

    //initialize file content
    for(int i = 0; i<10240; i++)
    {
        try 
        {
            pub_f.write(0);
        }
        catch (IOException e) 
        {
            System.out.println("fail to initialize file content. Exception message: " + e.getMessage());
            e.printStackTrace();
        }
    }

}

public int ReadFile(int offset, int length, byte[] data) 
{
    if (pub_f == null)
    {
        System.out.println("fail to open file for reading");
        return -1;
    }

    try 
    {
        pub_f.readFully(data, offset, length);
    } 
    catch (IOException e) 
    {
        System.out.println("fail to read from file. Exception message: "+ e.getMessage());
        e.printStackTrace();
        return -1;
    }

    return 0;
}

Answer 2

问题是您在i方法中声明了索引变量changeImageRight。这意味着每次调用方法时，i始终都会设置为0。

您希望在每次调用i之间保持changeImageRight的值。为此，只需在函数外声明变量即可。您可以将行var i = 0;移到function changeImageRight () {

行的上方

Answer 3

您只需要全局声明变量i。
像这样：

<html>
<head>
<script>
    //GLOBAL DECLARATION
    var i = 0;

    document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');

    document.getElementById("rightArrow").addEventListener("click", changeImageRight);


    function changeImageRight () {

        if(i == 0) {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');
            i++;
        }
        else if (i == 1)
         {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-2.png) no-repeat !important');
            i++;
        }
        else if (i == 2) {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-3.png) no-repeat !important');
            i++;
        }
        else {
            document.getElementById("headerContent").setAttribute('style', 'background:url(images/home-header-1.png) no-repeat !important');
            i++;
        }

    } 
</script>
</head>
<body>
    <div id="headerContent">
            <div id="rightArrow"></div><!-- end of rightArrow-->
            <div id="leftArrow"></div><!-- end of leftArrow-->
    </div><!-- end of headerContent-->
</body>
</html>

我使用过内部JavaScript。如果有的话，可以将此JavaScript放在外部JS文件中。

更改元素

3 个答案: