Script etc. zum zyklischen Anzeigen für Websites in Firefox?

**Ceos** · 07.03.2018, 14:02

EDITIERT, BITTE GENAU AUF DIE EDIT MARKIERUNG ACHTEN

Code:

<!--
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
//
// **********************************************************************
// This program is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
// **********************************************************************
-->
<html lang="en">
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script>
    <script type="text/javascript">
      $(document).ready(function () {  //start after HTML, images have loaded
         alert("LAUNCHING");
        var InfiniteRotator = 
        {
          init: function()
          {
            //initial fade-in time (in milliseconds)
            var initialFadeIn = 1000;
            
            //interval between items (in milliseconds)
            var itemInterval = 5000;
            
            //cross-fade time (in milliseconds)
            var fadeTime = 2500;
            
            //count number of items
            var numberOfItems = $('.rotating-item').length;
      
            //set current item
            var currentItem = 0;
      
            //show first item
            $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
            alert("PREPARED");
      
            //loop through the items    
            var infiniteLoop = setInterval(function(){
              $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
               alert("ROTATING");
              if(currentItem == numberOfItems -1){
                currentItem = 0;
              }else{
                currentItem++;
              }
              $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
      
            }, itemInterval); 
            alert("DONE");
          } 
        };
      
        InfiniteRotator.init();
        
      });
    </script>    <meta charset="utf-8" />
    <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title>
  </head>
  <body>

    <h1>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</h1>
    <div id="rotating-item-wrapper">
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/polar-area.html" width="980" height="347" /></div>
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/line/stepped.html" width="980" height="347" /></div>
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/bar/horizontal.html" width="980" height="347" /></div>
    </div>
   </body>

ACHTUNG: da sind alerts drinne zum debuggen, einfach nur die alert zeilen löschen dann sind die meldungen weg!

VERALTET: der funktioniert aber die divs sind trotzdem nciht sichtbar aus irgendwelchen gründen die sich mir gerade noch nciht erschließen
EDIT: habe vergessen die divs mit dem inhalt reinzu packen, jetzt geht es ;D

in der script schleife wo das fadein steht, könnetst du einfach eine zeile darüber einfügen die das div neu laden lässt um den inhalt neu zu laden! sollten deine charts bereits von alleine updaten kannst du dir das sparen

PS: später kann cih dir auch noch versuchenein simples eingabefeld einzubauen, mit dem du neue charts hinzufügen kannst, aber normalerweise lädt er nur das was als <div class="rotating-item"></div> im beispiel angegeben ist und innerhalb des wrappers <div id="rotating-item-wrapper"></div> steht