博客的随机默认缩略图

时间:2014-04-14 14:23:23

标签: html css thumbnails default

我正在学习HTML和CSS。我正在开发博客博客模板。

我的模板有一个帖子缩略图的首页。

我为默认缩略图设置了一个类,当我的帖子没有图片时,我已经在css中设置了网址。

.altthumbnails {
   background: url(myimagelocation.jpg);  
}

有什么方法可以制作多个默认缩略图吗?当没有帖子图像时,我想选择三个图像随机显示。

感谢您的回复

1 个答案:

答案 0 :(得分:0)

你不能只用纯CSS来做。但是你可以通过你使用的服务器端代码或者我建议使用的js来实现。基本上,最简单的解决方案之一就是你可以为你想要使用的每个不同的图像创建不同的类,然后你可以在js中产生一个随机数,并使用这个数字将不同的类应用于你的元素。这是一个例子:

<强> DEMO

在该示例中,有5个不同的css类提供5个不同的背景图像,并且它们的所有名称以数字1&gt;&gt;结尾。 5。

.thumb_1 { .. }
.thumb_2 { .. }
.thumb_3 { .. }
.thumb_4 { .. }
.thumb_5 { .. }

在javascript中,我们将遍历对象,生成随机数1&gt;&gt; 5并使用此数字添加这样的新类。

var div = document.getElementsByClassName("thumb");

//var rand = Math.floor(Math.random() * 5 ); // for just one image

for (var i = 0; i < div.length; i++){
   var rand = Math.floor(Math.random() * 5 ); // for multiple images
   div[i].className += " thumb_" + (rand + 1) ;
};