Bilderwechsel bei Seitenaufruf

M

mkca

Neues Mitglied
Hallo!

Ich bin neu hier.....

Ich möchte gerne ein Skipt realisieren, daß bei jedem neuen Seitenaufruf der Webseite ein anderes Bild angezeigt wird. Ich habe dazu im Internet folgende zwei Skripte gefunden. Beide funktionieren auch!

Der besseren Übersicht möchte ich meine Bilder aber in einem Unterordner verwalten. Wie kann ich im Skript den Zugriff auf einen Unterorder ermöglichen?

Welches ist eurer Meinung das Bessere oder elegantere Skript? Oder gibt es andere Vorschläge für ein Skript?

Freue mich auf eure Antworten. Danke!


Skipt 1:

Java: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<SCRIPT LANGUAGE="JavaScript">

var Pic = new Array() 

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
Pic[5] = '6.jpg'
Pic[6] = '7.jpg'
Pic[7] = '8.jpg'
Pic[8] = '9.jpg'
Pic[9] = '10.jpg'
Pic[10] = '11.jpg'
Pic[11] = '12.jpg'
Pic[12] = '13.jpg'
Pic[13] = '14.jpg'
Pic[14] = '15.jpg'

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

</script>

</head>

<body>

<SCRIPT LANGUAGE="JavaScript">

showImage();

</script>

</body>
</html>

Skript 2:

Java: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script language="JavaScript"> 
 
   var anzahl = 15; 
   var nummer = Math.random() ; 
   var txt = Math.round( (anzahl-1) *  nummer) + 1 ; 
   image = new Array 
   image[1] = "1.jpg"; 
   image[2] = "2.jpg"; 
   image[3] = "3.jpg"; 
   image[4] = "4.jpg"; 
   image[5] = "5.jpg"; 
   image[6] = "6.jpg"; 
   image[7] = "7.jpg";
   image[8] = "8.jpg";   
   image[9] = "9.jpg";   
   image[10] = "10.jpg";
   image[11] = "11.jpg";   
   image[12] = "12.jpg";
   image[13] = "13.jpg";
   image[14] = "14.jpg";
   image[15] = "15.jpg";
   
   var showimage = image[txt]; 
    
   document.write("<img border='0' src='" + showimage + "' alt='' />") 
 
</script>


</head>

<body>

<SCRIPT LANGUAGE="JavaScript">

showImage();
</script>

</body>
</html>
 
M

mkca

Neues Mitglied
Vielen Dank für den Code! Ich habe es versucht, funktioniert aber nicht.

Ich weiß ich nicht, wo ich genau den <img src="dein-Ordner/dein-bild.png” einbinden soll.
Und in dem Unterverzeichnis sollen mehrere Bilder liegen – wie kann auf diese zugegriffen werden?

Freue mich auf eure Antworten. Wie gesagt, ich bin Anfänger....

Beste Grüße
 
R

Runtime

Top Contributor
Das wäre der HTML-Code. dein-Ordner wäre der Unterordner für deine Bilder und dein-bild.png wäre das Bild, das du laden möchtest.
 
T

Tomate_Salat

Gast
Hat mich interessiert: folgende Struktur:
Code: 
- demo.html
- [img]http://www.java-forum.org/fuer-verirrte-fragen-javascript/ <-- Ordner
     |- a.jpg
     |- b.jpg
     |- ...

so schaut die demo.html aus:
Code: 
<html>
<head>
<script>
// Configuration
var delay  = 1000;                                       // Zeit bis neues Bild angezeigt wird
var images = new Array("a.jpg","b.jpg","c.jpg","d.jpg"); // Hier die Bilnamen eingeben
var source = "img/";                                     // Der Ordner, der die bilder enthält

// Ab hier nichts mehr Ändern
var zahl;

function loaded() 
{ 
  zahl   = parseInt(Math.random() * (images.length));
  
  document.getElementById("image").src = source + images[zahl];
  
  window.setTimeout("timer()", parseInt(delay));
}

function timer() 
{
  zahl  = parseInt((zahl + 1) % images.length);

  document.getElementById("image").src = source + images[zahl];

  window.setTimeout("timer()", parseInt(delay));
}

</script>
</head>
<body onload="loaded()">
<img src="" alt="Fehler im Script" width="300px" height="300px" id="image" />
</body>
</html>

das ganze hat jz noch eine random-funktion.wenn du die nicht willst, entferne die funktion [c]time();[/c] und lösche die zeile mit [c]window.setTimeout...[/c] in der Funktion [c]loaded()[/c]

MFG

Tomate_Salat
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
A Bilderwechsel mit Link Angular, React, JQuery - Fragen zu JavaScript 5
M Bilderwechsel Angular, React, JQuery - Fragen zu JavaScript 5
S Bilderwechsel bei Mousescroll Angular, React, JQuery - Fragen zu JavaScript 4
S automatischer Bilderwechsel Angular, React, JQuery - Fragen zu JavaScript 4
D *.js-datei bei Seitenaufruf laden Angular, React, JQuery - Fragen zu JavaScript 2

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben