Question

a）我有100个身体背景图像

b）和单个链接

每次点击链接时，背景图像应该更改为批次中的下一个图像，逐个进入批次（如果同时显示当前图像的名称/编号，则会很好）。

图像都在专用目录中。 jQuery已经加载了。

任何人都知道我在哪里可以找到执行此操作的代码吗？

一切顺利......

Answer 1

var allImages = ["path/to/image2", "path/to/image1"];


$(document).ready(function() {
    $("#theLink").click(function() {
        var newImageLink = allImages.pop();
        $("body").css("background-image", "url(" + newImageLink + ")");
    });
});

Answer 2

（与gs的回答相反）

var allImages = ["path/to/image2", "path/to/image1"];
var counter = 0;


$(document).ready(function() {
    $("#theLink").click(function() {
        var newImageLink = allImages.pop();
        $("body").css("background-image", "url(" + newImageLink + ")");
        $("#displayhere").html("<b>"+ counter +"</b>");
        counter = counter + 1;
    });
});

Answer 3

您不一定需要以这种方式对图像的路径进行硬编码。您可以将图像命名为image_xxx.png，1 - 100，并在一个位置引用该名称。这样，如果您需要更改名称，可以在一个地方轻松完成。此外，请确保将锚标记的href属性设置为＃以防止每次单击时重新加载页面。

这是一个更完整的解决方案，也可以进行范围检查，当我们达到极限时它就会结束：

<script language="javascript" type="text/javascript">
<!--    
    var ctr = 0;

    $(document).ready( function () {
        nextBg();
    });

    function nextBg()
    {
        ++ctr;

        if( ctr <= 100 )
        {
            $("body").css( "background-image", "url(images/image_" + ctr + ".png)" );
            $("#message").text("Current image: " + "image_" + ctr + ".png");
            if( ctr == 100 )
                ctr = 0;
        }
    }
//-->
</script>
</head>

<body>
    <div>
       <span id="message"></span><br />
       <a href="#" onclick="nextBg();" />Next</a>
    </div>
</body>

通过100个背景图像循环点击

3 个答案: