CSSベースのページのJavaScriptのランダムイメージジェネレータ

タイトルとして、私のWebページでこのjavascript関数を呼び出す方法を理解しようとしています。それは私のビジネスのためであり、テンプレートは単なる基本的な無料のものです。私より経験豊富な人にとっては、それを正しくフォーマットするだけの単純な問題だろうと確信しています。ここで私が働いているものがあります。 WebページのHEAD部分に行くCSSベースのページのJavaScriptのランダムイメージジェネレータ

コード：今すぐ

var theImages = new Array() 
theImages[0] = 'splash1.jpg' 
theImages[1] = 'splash2.jpg' 
theImages[2] = 'splash3.jpg' 
theImages[3] = 'splash4.jpg' 
theImages[4] = 'splash5.jpg' 
theImages[5] = 'splash6.jpg' 

var j = 0 
var p = theImages.length; 
var preBuffer = new Array() 
for (i = 0; i < p; i++){ 
    preBuffer[i] = new Image() 
    preBuffer[i].src = theImages[i] 
} 
var whichImage = Math.round(Math.random()*(p-1)); 
function showImage(){ 
document.write('<img src="'+theImages[whichImage]+'">'); 
} 

</script>

私が使う関数を呼び出すために：

<SCRIPT LANGUAGE="JavaScript"> 
showImage(); 
</script>

をここで私がしようとしているれているページがありますそれを実装する： http://coloradopp.com/index4.html

Instea画像を表示するだけで、その機能を呼びたいと思います。スプラッシュ1-6はすべて元のイメージと同じサイズです。あなたはすべての書式のスタイルシート（style.cssに）上のページの呼び出しを言うことができるように

<div id="splash"> 
<img class="pic" src="images/splash1.jpg" width="870" height="374" alt="" /> 
</div>

：ここ

は、コードスニペットです。

誰でもこの作業を行うためのヒントを提供できますか？私が集めたものから、JavaScriptシートをCSSシートに実装することはできません。前もって感謝します。

出典

2012-05-13 user1246457

まず、関数の内部で何かあなたのjavascriptのコードを移動：

function showImage(){ ...your code goes here...}

をそして、あなたは、このようなページのロード時に機能を開始することができます。

<body onload="showImage()">

出典

2012-05-13 16:01:02 Gabriel

？ – user1246457

あなたが背景としてイメージを動的に設定することができます - イメージとこのような場所を置く

<script> 
document.write('<style>#splash{ background-image:url(\'images/splash'+Math.round(Math.random()*5+1)+'.jpg\');}</style>'); 
</script>

あなたの頭にページ。このソリューションでは、あなたのdivタグの修正寸法を設定する必要があります（870x374）

出典

2012-05-13 16:15:56 sofl

ありがとう、これは実際に非常に役に立ちます。唯一のことは、画像を背景として配置するので、占有するスペースが画像よりも大きくなることです。これには何らかの方法がありますか？関数をイメージソースとして呼び出すことはできませんか？ – user1246457

はこのような何かを：

私は関数の内部で移動する必要がありますどのようなコード

showImage() { 
    var theImages = [ 'splash1.jpg', 'splash2.jpg', 'splash3.jpg', 'splash4.jpg', 'splash4.jpg' ]; 
    var img = theImages[Math.round(Math.random() * (theImages.length - 1))]; 
    document.getElementById('splash').innerHTML = '<img src="' + img + '">'); 
}

出典

2012-05-13 16:38:40 Kvam

CSSベースのページのJavaScriptのランダムイメージジェネレータ

答えて

関連する問題