选择要显示的随机图像
我有一个包含4张图片的页面。 我想在每次查看页面时从一系列图像中随机选择这些图像。
图像还需要链接到特定页面（取决于显示的图像）。 例如：
- image_01 page_620.html
- image_04 page_154.html
HTML：
CSS：
.thankyou_wrapper { width: 100%; background-color: #FFF; } .thankyou { margin: auto; width: 940px; min-height: 216px; overflow: hidden; padding-top: 20px; padding-bottom: 20px; } .socialphoto_container { width: 940px; height: 230px; } .socialphoto { width: 240px; height: 220px; margin-right: 0px; float: left; } .socialphoto:last-child { width: 220px; }
有任何想法吗？
可以通过创建可能图像的数组，对arrays进行洗牌，然后抓取前4个图像并附加到div来完成：
// randomize array function Array.prototype.shuffle = function() { var i = this.length, j, temp; if ( i == 0 ) return this; while ( --i ) { j = Math.floor( Math.random() * ( i + 1 ) ); temp = this[i]; this[i] = this[j]; this[j] = temp; } return this; } // declare image data as array of objects var images = [ { src : 'images/image_01.jpg', href : 'page_082.html' }, { src : 'images/image_02.jpg', href : 'page_083.html' }, { src : 'images/image_03.jpg', href : 'page_084.html' }, { src : 'images/image_04.jpg', href : 'page_085.html' }, { src : 'images/image_05.jpg', href : 'page_086.html' }, { src : 'images/image_06.jpg', href : 'page_087.html' } ]; $(document).ready(function(){ var img, anchor, div; var cont = $('.socialphoto_container'); cont.children().remove(); images.shuffle(); for(var i=0; i<4; i++){ img = $('![]()
', { src : images[i].src }); anchor = $('', { href : images[i].href, target : '_self' }); div = $('', { class : 'socialphoto' }); anchor.append(img); div.append(anchor); cont.append(div); } });
Array.shuffle()是Fisher-Yates算法，取自此处 。