Finale Fassung!!!!
ich habe die links in ein array gepackt und nur minimales feedback eingebaut, wenn man zu wenig einträge ind er liste hat doer wenn der script das wrapper div nicht finden kann!
außerdem habe ich den code mal kommentiert zum verständnis und in dem array kann man auch sagen ob die seite NACH DEM FADEOUT neu geladen werden soll oder nicht (soll bedeuten die pages laden gleich NACH dem ausblenden neu, sind also nicht top aktuell, dafür müsste ich mir nochmal einen in der logik abbrechen um quasi das übernächste object zu reloaden während das aktuelle angezeigt wird doer so)
ACHTUNG: achte mal auf deinen RAM verbrauch, für das reload lösche ich content und erstelle ihn neu, ich hoffe da ist kein memory leak dabeiCode:<!-- // 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> <meta charset="utf-8" /> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; } </style> <!--[if lte IE 6]> <style type="text/css"> #container { height: 100%; } </style> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.3.1"></script> <script type="text/javascript"> //define list for all websites to cycle var URIList = [ {"data": "https://www.onvista.de/index/DAX-Index-20735", reload: false}, {"data": "https://www.onvista.de/index/MDAX-Index-323547", reload: false}, {"data": "https://www.onvista.de/index/Dow-Jones-Index-324977", reload: false}, {"data": "https://www.onvista.de/aktien/Alibab...e-US01609W1027", reload: false}, {"data": "https://www.onvista.de/aktien/Facebo...e-US30303M1027", reload: false}, {"data": "http://www.zeitzonen.de/deutschland.html", reload: true} ]; //creates an object JQUERY node with the defined website that can be attached anywhere function createContent(data) { var newcontent = document.createElement("object"); newcontent.style.position = "fixed"; newcontent.style.top = 0; newcontent.style.left = 0; newcontent.style.minWidth = "100%"; newcontent.style.minHeight = "100%"; newcontent.id = "content-object"; newcontent.type = "text/html"; newcontent.data = data; return $(newcontent); } $(document).ready(function () { //create our rotating-items var divs = []; var containers = $("#rotating-item-list"); if(containers.length == 0) { alert("NO \"rotating-item-list\" CONTAINER FOUND!") } else if(containers.length > 1) { alert("ONLY 1 \"rotating-item-list\" CONTAINER ALLOWED!") } else { var divcontainer = containers.get(0); URIList.forEach(function(element){ //create a div that can be faded and uses all displayspace available while overlapping with identical divs var newdiv = document.createElement("div"); newdiv.style.position = "fixed"; newdiv.style.top = 0; newdiv.style.left= 0; if(divs.length > 0) { newdiv.style.display = "none"; } else { newdiv.style.display = "block"; } newdiv.style.minHeight = "100%"; newdiv.style.minHidth = "100%"; newdiv.class = "rotating-item"; newdiv.sandbox = ""; //create an object which loads and displays the page of interest var newcontent = createContent(element.data); //convert DOM to JQUERY newdiv = $(newdiv); //insert content in div newdiv.append(newcontent); //insert div in container divcontainer.append(newdiv.get(0)); divs.push(newdiv); }); if(divs.length < 2) { alert("TO FEW ENTRYS TO CYCLE"); } else { //start after HTML, images have loaded var InfiniteRotator = { init: function() { //initial fade-in time (in milliseconds) var initialFadeIn = 1000; //interval between items (in milliseconds) var itemInterval = 3000; //cross-fade time (in milliseconds) var fadeTime = 1000; //count number of items var numberOfItems = divs.length;//$('.rotating-item').length; //set current item var currentItem = 0; //show first item $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); var lastItem = -1; //loop through the items var infiniteLoop = setInterval(function () { //fade out and when finished reload page divs[currentItem].fadeOut(fadeTime, function (){ if(URIList[lastItem].reload == true) { var fadednode = $(this); //grab JQUERY fadednode.empty(this.firstChild); //clear content var newcontent = createContent(URIList[lastItem].data); //create new content fadednode.append(newcontent); //append new content } }); lastItem = currentItem; if(currentItem == numberOfItems -1) { currentItem = 0; } else { currentItem++; } divs[currentItem].fadeIn(fadeTime); }, itemInterval); } }; InfiniteRotator.init(); } } }); </script> <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title> </head> <body> <div id="rotating-item-list"> </div> </body> </html>![]()








Zitieren

Lesezeichen