Question

我有一个页面，显示来自5个图像阵列的随机背景图像。我想在页面底部为该图像提供相应的归属链接，但我不确定如何使用javascript或php执行此操作。这就是我现在所拥有的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script>

<script type="text/javascript">
 var images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
 $('body').css({'background-image': 'url(/sites/default/files/images/' + images[Math.floor(Math.random() * images.length)] + ')'});
</script>

这样可以很好地加载背景图像，但是有没有办法为数组中的每个图像添加一个链接元素并在页面的某个位置显示链接？

Answer 1

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- javascript/jQuery -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>

<a id ="link" href="#"></a>

<script type="text/javascript">
    var images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
    var links = ['home.html', 'contact.html', 'about.html', 'product.html', 'gallery.html'];
    var text = ['home', 'contact', 'about', 'product', 'gallery'];
    var rand = Math.floor(Math.random() * images.length);

    $('body').css({'background-image': 'url(/sites/default/files/images/' + images[rand] + ')'});
    $('#link').attr('href', links[rand]);
    $('#link').html(text[rand]);
</script>

</body>
</html>

随机背景图片及相应的归属链接？

1 个答案: