Javascript: Bilderslideshow

K

kakapopo

Mitglied
Hallo,

ich hätte da ein Problem. Und zwar wollte ich auf meine Webseite eine Bildersliedeshow mit 6 verscheidenen Bildern machen, doch leider funktioniert das nicht. Es muss ein fehler im Code sein.

PS: Kennt ihr vielleicht eine Möglichkeit, wie man dasselbe mit CSS realisieren kann?

Ich habe es unten im DIV "Gallery" eingebunden.

Bitte mit Firefox oder Ähnlichem ansehen, da noch nicht auf IE optimiert


Hier ist er:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Breakfasthouse.com  </title>
<script language="JavaScript"> 
<!-- Begin 
// Set slideShowSpeed (milliseconds) 
var slideShowSpeed = 10; 
// Duration of crossfade (seconds) 
var crossFadeDuration = 3; 
// Specify the image files 
var Pic = new Array(); 
// to add more images, just continue 
// the pattern, adding to the array below 

Pic[0] = 'img/picture1.gif' 
Pic[1] = 'img/picture2.gif' 
Pic[2] = 'img/picture3.gif' 
Pic[3] = 'img/picture4.gif' 
Pic[4] = 'img/picture5.gif'
Pic[5] = 'img/picture6.gif'
//Pictures - as much as you want

// do not edit anything below this line 
var t; 
var j = 0; 
var p = Pic.length; 
var preLoad = new Array(); 
for (i = 0; i < p; i++) { 
preLoad = new Image(); 
preLoad.src = Pic; 
} 
function runSlideShow() { 
if (document.all) { 
document.images.SlideShow.style.filter="blendTrans(duration=2)"; 
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; 
document.images.SlideShow.filters.blendTrans.Apply(); 
} 
document.images.SlideShow.src = preLoad[j].src; 
if (document.all) { 
document.images.SlideShow.filters.blendTrans.Play(); 
} 
j = j + 1; 
if (j > (p - 1)) j = 0; 
t = setTimeout('runSlideShow()', slideShowSpeed); 
} 
// End --> 
</script> 
<style type="text/css">
/*<![CDATA[*/

body {
font: 100.01% Verdana;
background-color:#FFFFFF;
color:#333333;
overflow:hidden;
}
#body {
width:99.98%;
}
#container {
width: 746px;
text-align:left;
margin: 0 auto;
position:fixed;
left: 140px;
top: 5px;
}
#header {
background-image:url(img/header.gif);
width: 746px;
height: 101px;
display:block;
position:fixed;
top: 8px;
}
#navigationtop {
width: 746px;
height: 37px;
background-image:url(img/navigationoben2.gif);
font-weight:bold;
font-size:12px;
color:white;
display:block;
position:fixed;
top: 109px;
}
.topnavi a:visited   {
color:#FFFFFF;
text-decoration: none;
}
.topnavi a:link {
color:#FFFFFF;
text-decoration:none;
}
.topnavi a:hover  {
color: white;
text-decoration:underline;
}
.topnavi {
position:fixed;
top: 116px;
left: 353px;
}
#navigationleft {
display:block;
width:201px;
height: 181px;
background-image:url(img/navigationlinks.gif);
font-size:11px;
line-height: 20px;
position:fixed;
top: 146px;
left: 140px;
}
ul {
list-style-image:url(img/listspace.gif);
position:fixed;
left: 140px;
color:#333333;
}
#picsbar {
width: 533px;
height: 165px;
background-image:url(img/bilderleiste.gif);
position: fixed;
top: 145px;
right: 150px;
}
#rightbar {
width:14px;
height:414px;
background-image:url(img/leisterechts.gif);
position:fixed;
top: 145px;
right: 138px;
}
#welcometext {
width: 481px;
height: 233px;
background-image:url(img/welcometextflaeche.gif);
position:fixed;
top: 326px;
left: 391px;
}
#whitebar {
background-color:#ffffff;
width: 531px;
height: 26px;
position:fixed;
top: 310px;
left: 341px;
}
#footer {
font-size:11px;
position:fixed;
bottom: 0px;
left: 320px;
display:none;
}
#footer a:visited {
color: #283140;
text-decoration:none;
}
#footer a:hover {
color: #283140;
text-decoration:underline;
}
#footer a:link {
color: #283140;
text-decoration:none;
}
#gallery {
width: 251px;
height: 233px;
background-image:url(img/gallerie.gif);
position:fixed;
top: 326px;
left: 140px;
}
ul a:visited {
color: #333333;
text-decoration:none;
}
ul a:hover {
color:#000099;
text-decoration:none;
}
ul a:link{
color:#333333;
text-decoration:none;
}
#picsbar span {
font-size:11px;
margin-left: 56px;
margin-top: 141px;
display:block;
}
#picsbar a:visited {
color:#333333;
text-decoration:none;
}
#picsbar a:hover {
color:#000099;
text-decoration:underline;
}
#picsbar a:link {
color:#333333;
text-decoration:none;
}
#gallery span {
color:#FFFFFF;
font-size:11px;
margin-left:64px;
margin-top: 215px;
display:block;
}
#gallery a:visited {
color:#fff;
text-decoration:none;
}
#gallery a:hover {
color:#fff;
text-decoration:underline;
}
#gallery a:link {
color:#fff;
text-decoration:none;
}
#welcometext p {
font-size: 12px;
margin-left: 20px;
margin-top: 50px;
margin-right: 12px;
}
#whitebar span {
font-size:10px;
font-weight:bold;
padding-top:2px;
padding-left: 45px;
display:block;
color:#283140;
}
#whitebar a:visited {
color:#283140;
text-decoration:none;
}
#whitebar a:hover {
color:#283140;
text-decoration:underline;
}
#whitebar a:link {
color:#283140;
text-decoration:none;
}
#navigationtop input {
margin-top:8px;
margin-left:25px;
font-size:11px;
color:#283140;
}
/* Internet Explorer Part */
* html body {
height:100%;
width:99.98%;
}
* html #header {
position:absolute;
top: 8px;
left: 130px;
}
* html #navigationtop {
position:absolute;
top: 107px;
left: 130px;
}
* html #navigationleft {
position:absolute;
top: 144px;
left:130px;
}
* html #picsbar {
position:absolute;
top:143px;
left:331px;
}
* html .topnavi {
position:absolute;
top: 7px;
left: 213px;
}
* html #rightbar {
position:absolute;
top: 143px;
right: 128px;
}
* html #whitebar {
position:absolute;
top: 308px;
left: 330px;
}
* html #welcometext {
position:absolute;
top: 324px;
left: 343px;
}
* html #gallery {
position:absolute;
top: 324px;
left: 130px;
}
* html ul {
position: absolute;
top: 8px;
left: 0;
}
* html .bg {

}
/* Internet Explorer Part End */
/*]]>*/
</style>
</head>
<body>
<div class="bg" id="body">
<div id="container">
   <div id="header"></div>
   <div id="navigationtop"><span class="topnavi"><a href="index.html">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">Rooms &amp; Rates</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">Region &amp; Local Attractions</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">About Us</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">Contact Us</a></span></div>
   <div id="navigationleft">
      <ul>
	     <li><a href="index.html">Individual Room Details</a></li>
		 <li><a href="index.html">Special Deals</a></li>
		 <li><a href="index.html">Meals &amp; Menus</a></li>
		 <li><a href="index.html">Terms &amp; Conditions</a></li>
		 <li><a href="index.html">Attractions &amp; Pastimes</a></li>
		 <li><a href="index.html">Photo Gallery</a></li>
		 <li><a href="index.html">Links</a></li>
		 <li><a href="index.html">References &amp; Testimonials</a></li>
	  </ul>	 
   </div>
   <div id="picsbar"><span><a href="index.html">View Details</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">View Details</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">View Details</a></span></div>
   <div id="rightbar"></div>
   <div id="whitebar"><span><a href="index.html">.Home</a></span></div>
   <div id="welcometext"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><p style="margin-top:2px"> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitir a sun.</p>
   </div>
   <div id="gallery"><onLoad="runSlideShow()"> 
<img src="img/picture1.gif" name='SlideShow'></div> 
</div>
   <div id="footer"><p>Copyright 2006 by Breakfasthouse.com &nbsp;&nbsp;&nbsp;All rights reserved</div>
</div>
</div>   
</body>
</html>

Danke

mfg
 
Was kommt denn das für eine Fehlermeldung?
Oder was funktioniert nicht? Wird was nicht angezeigt?
 
Prinzipiell sehe ich 2 Probleme in deinem Code:

Zum einen hast du ein Array von Images, nutzt es aber nicht. Besser ist:

Code: 
var preLoad = new Array(); 
for (i = 0; i < p; i++) { 
preLoad[i] = new Image(); 
preLoad[i].src = Pic; 
}

Zum anderen hast du ein "onLoad" Tag. Das gibt's aber gar nicht, sondern sollte als Attribut verwendet werden:

Code: 
   <div id="gallery" onLoad="runSlideShow()">

Allerdings weiß ich nicht ( :confused: ) ob das an der Stelle überhaupt korrekt ist, oder ob du den onLoad Aufruf nicht besser im Body Tag platzierst.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück