nicht angemeldet
Jquery funktioniert nicht, automatischer Bildwechsel Background
Hallo zusammsen, ich habe ein kleines Problem. Und zwar möchte ich einen Bildwechsel des Backgrounds realisieren und bin dabei auf jquery gestoßen, nur leider funktioniert es bei mir nicht, es werden keine bilder geladen. was hab ich hier falsch gemacht? habe das template und die css mal beigefügt. danke für eure hilfe.
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> <link rel="shortcut icon" href="/favicon.ico" > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Unbenanntes Dokument</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <link href="../css/style.css" rel="stylesheet" type="text/css" /><!--[if IE]> <style type="text/css">
</style> <![endif]-->
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script> <script type=”text/javascript”> function thebackground() { $(‘div.background img’).css({opacity: 0.0}); $(‘div.background img:first’).css({opacity: 1.0}); setInterval(‘change()’,5000); } function change() { var current = ($(‘div.background img.show’)? $(‘div.background img.show’) : $(‘div.background img:first’)); if ( current.length == 0 ) current = $(‘div.background img:first’); var next = ((current.next().length) ? ((current.next().hasClass(‘show’)) ? $(‘div.background img:first’) :current.next()) : $(‘div.background img:first’)); next.css({opacity: 0.0}) .addClass(‘show’) .animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000) .removeClass(‘show’); }; $(document).ready(function() { thebackground(); $(‘div.background’).fadeIn(1000); // works for all the browsers other than IE $(‘div.background img’).fadeIn(1000); // IE tweak }); </script> <div class=”background”><img src=”millenniumBridge.jpg” width=”1400″ height=”819″ alt=”pic1″ /><img src=”bg_trinity.jpg” width=”1401″ height=”934″ alt=”pic2″ /><img src=”bg_clare_college.jpg” width=”1400″ height=”934″ alt=”pic3″ /></div> <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} }
function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; }
function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; }
function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script>
</head>
<body class="twoColElsLtHdr" onload="MM_preloadImages('../images/homeover.png','../images/aboutover.png','../images/eventsover.png','../images/contactover.png','../images/galleryover.png','../images/guestover.png','../images/locationover.png','../images/jobsover.png','../images/pinnwandover.png','../images/ticketshopover.png','../images/facebook_grey.png')">
<div id="container"> <div id="header"> <h1><img src="../images/header2.png" width="900" height="268" /></h1> <!-- end #header --></div>
<div id="navigation"> <p><a href="../index.html"><img src="../images/home.png" name="home" width="105" height="45" border="0" id="home" onmouseover="MM_swapImage('home','','../images/homeover.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../about.html"><img src="../images/about.png" name="about" width="105" height="45" border="0" id="about" onmouseover="MM_swapImage('about','','../images/aboutover.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../events.html"><img src="../images/events.png" name="events" width="105" height="45" border="0" id="events" onmouseover="MM_swapImage('events','','../images/eventsover.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../contact.html"><img src="../images/contact.png" name="contact" width="105" height="45" border="0" id="contact" onmouseover="MM_swapImage('contact','','../images/contactover.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../gallery.html"><img src="../images/gallery.png" name="gallery" width="105" height="45" border="0" id="gallery" onmouseover="MM_swapImage('gallery','','../images/galleryover.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../guests.html"><img src="../images/guest.png" name="guests" width="105" height="45" border="0" id="guests" onmouseover="MM_swapImage('guests','','../images/guestover.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../location.html"><img src="../images/location.png" name="location" width="105" height="45" border="0" id="location" onmouseover="MM_swapImage('location','','../images/locationover.png',1)" onmouseout="MM_swapImgRestore()"/></a><a href="../jobs.html"><img src="../images/jobs.png" name="jobs" width="105" height="45" hspace="25" border="0" id="jobs" onmouseover="MM_swapImage('jobs','','../images/jobsover.png',1)" onmouseout="MM_swapImgRestore()" /></a></p></div>
<div id="sidebar1"> <h3><a href="https://www.facebook.com/QUBECLUBEschwege" target="_blank"><img src="../images/facebook.png" name="facebook" width="90" height="90" hspace="0" border="0" id="facebook" onmouseover="MM_swapImage('facebook','','../images/facebook_grey.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../pinnwand.html"><img src="../images/pinnwand.png" name="pinnwand" width="90" height="90" border="0" id="pinnwand" onmouseover="MM_swapImage('pinnwand','','../images/pinnwandover.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="../tickets.html"><img src="../images/ticketshop.png" name="tickets" width="90" height="90" border="0" id="tickets" onmouseover="MM_swapImage('tickets','','../images/ticketshopover.png',1)" onmouseout="MM_swapImgRestore()" /></a></h3> <p> </p> <h3> </h3> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p></div> <div id="mainContent"><!-- TemplateBeginEditable name="seiteninhalt" --> <h1> </h1> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <!-- TemplateEndEditable --> <p> </p> <p><br class="clearfloat" /> </p> </div> <div id="footer"> <p> </p> <!-- end #footer --></div> <!-- end #container --></div> </body> </html>
und hier noch die css
@charset "utf-8"; body { font: 100% Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-align: center; color: #000000; div.background { position:absolute; left:0px; top:0px; z-index:-1; } div.background img { position:fixed; list-style: none; left:0px; top:0px; } div.background ul li.show { z-index:500 } div.background { position:absolute; left:0px; top:0px; z-index:-1;}div.background img { position:fixed; list-style: none; left:0px; top:0px;}div.background ul li.show { z-index:500} </style> }
.twoColElsLtHdr #container { width: 900px; margin: 0 auto; text-align: left; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; } .twoColElsLtHdr #header {
} .twoColElsLtHdr #header h1 { margin: 0; Rahmen die gleiche Wirkung hat. padding: 10px 0; } .twoColElsLtHdr #navigation { margin: 0; background-image: url(../images/nav.png); background-repeat: no-repeat; padding-top: 15px; padding-right: 0; padding-bottom: 10px; padding-left: 0; }
.twoColElsLtHdr #sidebar1 { float: left; width: 8em; background-image: url(../images/sidebar.png); padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; margin-top: 20px; margin-bottom: 0px; margin-left: 0px; background-repeat: no-repeat; } .twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p { margin-left: 10px; margin-right: 10px; }
*/ .twoColElsLtHdr #mainContent { background-color: #FFF; margin-top: 15px; margin-bottom: 0; margin-left: 9em; color: #999; } .twoColElsLtHdr #footer { padding: 0 10px; background-image: url(../images/nav.png); background-repeat: no-repeat; } .twoColElsLtHdr #footer p { margin: 0; / padding: 10px 0; / }
.fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }
-
Beschränke deinen Beispielcode auf das Wesentliche, wenn du eine Antwort haben möchtest. Niemand hat Lust sich erstmal durch hunderte Zeilen Code zu wühlen, nur um die drei Zeilen zu finden, die sich wirklich mit der Hintergrund-Problematik beschäftigen.