[英]On load of page, put random image in div
我将图像物理存储在服务器上,而我想将其中一个图像随机放置在网站的每个页面上的一个特定的div中。
这是到目前为止我得到的代码:
function randomFromInterval(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
$(document).ready(function () {
var number = randomFromInterval(1, 3)
$("#adv").<--some jQuery functionality here-->(function (e) {
switch (number) {
case 1:
$(".onSideSmall").html('<img src="..\somewhere\someImg_1.png" alt="some_text" />');
break;
case 2:
$(".onSideSmall").html('<img src="..\somewhere\someImg_2.png" alt="some_text" />');
break;
case 3:
$(".onSidesmall").html('<img src="..\somewhere\somsomeImg_3.png" alt="some_text" />');
break;
}
});
});
但是div具有其他div所具有的类,因此我也将其设置为id:
<div class="onSideSmall">
</div>
<div class="onSideSmall">
</div>
<div class="onSideSmall" id="adv">
</div>
现在我想知道两件事:
我应该使用jQuery的什么功能,因为找不到类似onload
东西。
我是否正确使用div的id
和class
名? (由于我没有jQuery功能,因此我尚未对其进行测试)。
PS我正在从数据库中检索HTML并直接加载它,如果需要,我无法对其进行修改。
更新:
我使用以下代码:
$(document).ready(function () {
var number = randomFromInterval(1, 3)
switch (number) {
case 1:
$("#adv").html('<img src="..somewhere\asd.jpg" alt="ad 1" />');
break;
case 2:
$("#adv").html('<img src="..somewhere\dadada.jpg" alt="ad 2" />');
break;
case 3:
$("#adv").html('<img src="..somewhere\gagaga.jpg" alt="ad 3" />');
break;
}
});
但是我得到的只是alt
的值,而不是图片本身...
您可以执行以下操作:
function randomFromInterval(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
$(document).ready(function () {
var ranNumber = randomFromInterval(1, 3)
var picture = null;
switch(ranNumber) {
case 1:
picture = '<img src="http://placehold.it/550x150">'
break;
case 2:
picture = '<img src="http://placehold.it/150x250">'
break;
case 3:
picture = '<img src="http://placehold.it/350x150">'
break;
}
$("#adv").html(picture);
});
试用此CodePen并刷新一堆。
如果您只是将图像加载到div中,则只需将div id添加到类名中。
function randomFromInterval(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
$(document).ready(function () {
var number = randomFromInterval(1, 3)
var img = ''
switch (number) {
case 1:
img = '<img src="..\somewhere\someImg_1.png" alt="some_text" />';
break;
case 2:
img = '<img src="..\somewhere\someImg_2.png" alt="some_text" />';
break;
case 3:
img = '<img src="..\somewhere\somsomeImg_3.png" alt="some_text" />';
break;
};
$("#adv.onSideSmall").html(img);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.