Question

我试图在重新加载时更改图像元素的src。我想出了这个代码，但它对我不起作用：

var images = ['hero-1.jpg', 'hero-2.jpg', 'hero-3.jpg', 'hero-4.jpg', 'hero-5.jpg', 'hero-6.jpg'];
$('#hero figure img[src="images/' + images[Math.floor(Math.random() * images.length)] + '"]').appendTo('#hero img');

HTML

<section id="hero">
    <figure>
        <img src="images/hero-1.jpg" alt="Hero">
    </figure><!-- End figure -->
</section><!-- End section#hero -->

图像直接放在图像映射中。

Answer 1

这是一个小型AngularJS应用程序，可以满足您的需求：http://jsfiddle.net/HB7LU/3276/

它包含一个带有img网址的数组的控制器，以及一个返回这些网址中随机链接的函数：

function MyCtrl($scope) {
    var images = [
        'http://placehold.it/200x200', 
        'http://placekitten.com/200/300', 
        'http://www.lorempixum.com/400/300'
    ];

    $scope.getRandomImage = function () {
        var randIndex = ~~(Math.random() * images.length);
        return images[randIndex];
    };
}

这用于html中的表达式：

<img ng-src="{{getRandomImage()}}">

这里使用了Angular指令ng-src，因为它不允许在src属性中包含角度表达式。

虽然使用角度可能有点矫枉过正。

在重新加载时更改背景图像

1 个答案: