Zitat von
Ceos
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 dabei
hi,
dankeschön, ich teste es jetzt sofort!
Wie ich das mit dem RAM testen soll, weiß ich allerdings noch nicht....(?)
Hier ist dein Code mit ein paar Anpassungen meinerseits (urls berichtigt/ergänzt, Zeitdauer verlängert):
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>
<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: true},
{"data": "https://www.onvista.de/index/MDAX-Index-323547", reload: true},
{"data": "https://www.onvista.de/etf/DEKA-MDAX-UCITS-ETF-ETF-DE000ETFL441", reload: true},
{"data": "https://www.onvista.de/etf/DEKA-OEKOM-EURO-NACHHALTIGKEIT-UCITS-ETF-ETF-DE000ETFL474", reload: true},
{"data": "https://www.onvista.de/index/Dow-Jones-Index-324977", reload: true},
{"data": "https://www.onvista.de/aktien/Alibaba-Aktie-US01609W1027", reload: true},
{"data": "https://www.onvista.de/aktien/Facebook-Aktie-US30303M1027", reload: true},
{"data": "https://www.onvista.de/aktien/TENCENT-HOLDINGS-LTD-Aktie-KYG875721634", reload: true},
{"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 = 15000;
//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 Websites Using jQuery (JavaScript) - Unstyled</title>
</head>
<body>
<div id="rotating-item-list">
</div>
</body>
</html>
Zitieren
Lesezeichen