Question

我的网站上有2张图片，我想在网站加载时加载其中一张。

我尝试过使用一些javascript。但我对这一切都很陌生。

这就是我想我想要做到的。

<div class="image">
Show one of 2 images here.
</div>


    <script>
    var r = Math.floor(Math.random() * 100) + 1;    
    if(r < 51) { 
       SHOW IMAGE 1
    }
    else {
        SHOWIMAGE 2
    }
    </sccript>

所以我希望有人可以教我如何将其转化为功能代码。

感谢。

Answer 1

您可以使用javascript直接设置图像的src属性，然后使用Math.random，就像您希望在不同的图片网址之间选择一样。

使用ID为“random_image”的图片代码：

// images from wikipedia featured images/articles 2015-03-03
var img = document.getElementById('random_image');
if (Math.random() > .5) {
    img.src = 'http://upload.wikimedia.org/wikipedia/en/thumb/4/45/Bradford1911.jpg/266px-Bradford1911.jpg';
} else {
    img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Pitta_sordida_-_Sri_Phang_Nga.jpg/720px-Pitta_sordida_-_Sri_Phang_Nga.jpg';
}

这是一个jsfiddle示例：http://jsfiddle.net/8zd5509u/

Answer 2

1.way：

var _img = document.getElementById('id1');
var newImg = new Image;
newImg.onload = function() {
    _img.src = this.src;
}
newImg.src = 'http://www.something.blabla.....';

另一：

function preload(images) {
    if (document.images) {
        var i = 0;
        var imageArray = new Array();
        imageArray = images.split(',');
        var imageObj = new Image();
        for(i=0; i<=imageArray.length-1; i++) {
            //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
            imageObj.src=imageArray[i];
        }
    }
}

然后在每个网页中，在您调用主JavaScript文件后添加以下代码：

<script type="text/javascript">
preload('image1.jpg,image2.jpg,image3.jpg');
</script>

加载网站时会出现随机图像

2 个答案: