Loops 点击100个背景图像_Loops

Loops 点击100个背景图像

loops

Loops 点击100个背景图像,loops,Loops,a）我有100张身体背景图片 b）和一个链接每次点击链接时，背景图像应更改为批次中的下一个图像，逐个穿过批次（如果同时显示当前图像的名称/编号，则会更好）这些图像都在一个专用目录中。jQuery已经加载有人知道我在哪里可以找到简单的代码吗一切都好…（在gs的回答中添加了计数器） var allImages = ["path/to/image2", "path/to/image1"]; $(document).ready(function() { $("#theLink")

a）我有100张身体背景图片

b）和一个链接

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

这些图像都在一个专用目录中。jQuery已经加载

有人知道我在哪里可以找到简单的代码吗

一切都好…

（在gs的回答中添加了计数器）

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


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

var allImages=[“path/to/image2”，“path/to/image1”]；
var计数器=0；
$（文档）.ready（函数（）{
$（“#链接”）。单击（函数（）{
var newImageLink=allImages.pop（）；
$（“body”）.css（“背景图像”，“url”（+newImageLink+））；
$（“#displayhere”）.html（“+counter+”）；
计数器=计数器+1；
});
});

您不必以这种方式硬编码图像路径。您可以将图像命名为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>

感谢大家的友好回复。我欠“zdawg”一个特别强烈的“谢谢”，感谢他深思熟虑、内容丰富的回复，以及他的代码，它满足了我的所有要求，并且工作起来很有魅力。问题解决了。“stackoverflow”社区触礁。祝您一切顺利……感谢您的友好回复。我欠“zdawg”一个特别强烈的“谢谢”，感谢他深思熟虑、内容丰富的回复，以及他的代码，它满足了我的所有要求，并且工作起来很有魅力。问题解决了。“stackoverflow”社区触礁。祝你一切顺利。。。

<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>