0

単一ページのスクロール Web サイトの 1 つのセクションで背景画像をランダム化するコードを探しています。私はこれを行う方法を調査しました（php/js/htmlのもの; 1つは ex、2つ目は ex）が、画像をすべてのページ/セクションに適用したくないため、それらを機能させることができませんでした。 HTML の「本文」には入れたくないのです。" アドバイスしてください!

backgound-image現在、単一クラスのコードでCSS の背景を変更しています。

4

2 に答える 2

1

これは、背景画像をランダム化するための PHP コードです。

<?php

$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames

$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen        
?>

と：

<style type="text/css">
.mydiv{
    background: url(images/<?php echo $selectedBg; ?>) no-repeat;
    height:300px;
    width:300px;
}
</style>
<div class="mydiv">

</div>

これは、背景画像をランダム化するための JavaScript および JQuery ソリューションです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
$('.mydiv').css({
    'background-image': 'url(/path/to/images/' + images[Math.floor(Math.random() *      images.length)] + ')'
});
</script>

これを実際に見てください（画像をランダム化するには左上の実行を押してください）：http://jsfiddle.net/Kf6sb/

于 2012-11-12T23:53:18.067 に答える
0

これは、javascript/jquery でも行うことができます。上記のジャスティンのものと非常に似ていますが、PHP によって処理されず、ページ内の CSS も必要ありません。

var uri = 'http://example.com';
var img_folder = '/images/';
var img_files = ['bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg'];

function randomBackground()
{
   var random_image = img_files[Math.floor(Math.random()*img_files.length)];
   $('body').css({"background-image":"url("+random_image+")"});
}

//when the page loads
$(document).ready(function()
{
    randomBackground();
});

//an example of changing it on a timer at random
setInterval(function(){randomBackground();}, 300000);

//example of changing it on click
$('#someIDofSomeElement').click(function(){randomBackground();}

これはテストされていない純粋な概念であることに言及する価値がありますが、これが具体的に機能する必要がない場合は、この程度のものです。しかし、繰り返しになりますが、これは上記で示したように決まった方法ではなく、PHP を使用した方法や他の言語でそれを行う方法もあり、これに追加する方法、別の方法で行う方法、またはそれを行います。

于 2012-11-13T18:15:14.747 に答える