✔ Bilderwechsel mit Positionswechsel

B

bazyl

Grünschnabel
Moin,

ich möchte ein Banner erstellen, in dem verschiedene Logos abwechselnd an verschiedenen Positionen einblenden.

Das mit dem Bildwechsel funktioniert soweit ganz gut.

Für den Positionsechsel habe ich ein script gefunden, welches ich gerne mit meinem vorhanden kombinieren möchte. Blicke aber nicht so recht durch die Variablen durch.

Kann mir da wer helfen, oder noch besser: kennt Ihr ein Banner wo sowas bereits kompakt umgesetzt wurde? Suche nach einem Beispiel schon diverse Stunden.

Mein Bilderwechsel:

PHP: 
 <script type="text/javascript">
//<![CDATA[
    <!--
    var b = new Array();
    b[0] = new Image(); b[0].src = "Logo1.png"; b[1] = new Image(); b[1].src = "Logo2.png"; b[2] = new Image(); b[2].src = "Logo3.png"; b[3] = new Image(); b[3].src = "Logo4.png"; b[4] = new Image(); b[4].src = "Logo5.png"; b[5] = new Image(); b[5].src = "Logo6.png"; b[6] = new Image(); b[6].src = "Logo7.png"; var speed = 1000; // Delay in milliseconds
    // Zufallszahl ermitteln
    function randInt(min,max)
    {
    var div = (max - min) + 1
    var randNum = Math.random()
    for (var i = 0; i <= div - 1; i++)
    {
    if (randNum >= i / div && randNum < (i+1) / div)
    {return i + min}
    }
    }
    function diaShow()
    { var i = 0;
    i=randInt(0,b.length-1);
    document.images.show.src = b[i].src;
    window.setTimeout("diaShow()",speed);
    }
    //-->
    //]]>
    </script>

HTML: 
<div id="banner"><img id="show" src="pics/Logos/Logo1.png" alt="" border="0" hspace="10" vspace="12" name="show" /></div>


HIer das gefunden script für den Positionswechsel:

PHP: 
function moveRandom(obj,startX,ausdehnungX,startY,ausdehnungY)
{
for(var i=0;i<obj.length;i++)
	{
	if(document.getElementById)
		{
		//Math.round---> rundet
		//Math.random gibt eine Zufallszahl zwischen 0 und 1 zurück
		document.getElementById(obj[i]).style.top=
		Math.round(Math.random()*ausdehnungY)+startY;
		document.getElementById(obj[i]).style.left=
		Math.round(Math.random()*ausdehnungX)+startX;
		}
	else if(document.all)
		{
		document.all(obj[i]).style.top=
		Math.round(Math.random()*ausdehnungY)+startY;
		document.all(obj[i]).style.left=
		Math.round(Math.random()*ausdehnungX)+startX;
		}
	else if(document.layers)
		{
		document.layers[obj[i]].pageY=
		Math.round(Math.random()*ausdehnungY)+startY;
		document.layers[obj[i]].pageX=
		Math.round(Math.random()*ausdehnungX)+startX;
		}		
	}
//ende function
}
 
Moin bazyl,

wie genau stellst du dir denn diesen Positionswechsel generell vor?

Soll das Banner über dem Inhalt liegen(wie ein Layerad, dann würde es den Inhalt aber teilweise verdecken, was nicht unbedingt optimal ist)...oder hast du ein paar "Platzhalter" in der Seite, wo die Banner dann abwechselnd erscheinen sollen/können?
 
ich habe 20 pngs, die per Zufall nacheinander für sagen wir 5 sec. einblenden und dann wieder ausblenden. Das ganze spielt sich in einem div von einer größe 150 x 500px ab. Nun soll die Position dieser pngs aber per Zufall immer eine andere sein innerhalb des tags.
 
Hi,

kleines Beispiel - ohne grosse Erklärung - Zeitdruck.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var arrSrc = ["../bilder/fussball.jpg",
              "../bilder/fussball1.jpg",
              "../bilder/fussball2.jpg",
              "../bilder/fussball3.jpg",
              "../bilder/fussball4.jpg",
              "../bilder/fussball5.jpg"];

var arrImg = [];
for(var i=0; i<arrSrc.length; i++){
  arrImg[i] = new Image();
  arrImg[i].src = arrSrc[i];
  arrImg[i].style.position = "absolute";
}
var hTimer = null;

function bannerRotator(){
  // Zufallszahl bestimmen
  var intRnd = Math.floor(Math.random()*1000)%arrImg.length;
  var intRndX = Math.floor(Math.random()*10000)%(parseInt(readStyles("bannerID","width"))-arrImg[intRnd].width);
  var intRndY = Math.floor(Math.random()*10000)%(parseInt(readStyles("bannerID","height"))-arrImg[intRnd].height);

  var objBanner = document.getElementById("bannerID");
  objBanner.innerHTML = "";
  arrImg[intRnd].style.left = intRndX + "px";
  arrImg[intRnd].style.top  = intRndY + "px";
  objBanner.appendChild(arrImg[intRnd]);

  hTimer = window.setTimeout(function(){bannerRotator();}, 1000);
}

function readStyles(strID, strCSS){
  var varRet;

  //  Falls der Brower die Methode "getComputedStyle" kennt (W3C-DOM)
  if(window.getComputedStyle){
    varRet = window.getComputedStyle(document.getElementById(strID), null).getPropertyValue(strCSS);
  //  Falls der Browser die Methode "currentStyle" kennt (neuere IEs)
  }else if(document.getElementById(strID).currentStyle){
    varRet = document.getElementById(strID).currentStyle[strCSS];
  }

  return varRet;
}
 //-->
</script>
<style type="text/css">
  <!--
#bannerID{
	position: relative;
  width: 500px;
  height: 150px;
  border: 1px solid #ccc;
  background: #fff;
}
 //-->
</style>
</head>
<body>
<div id="bannerID"></div>
<button onclick="bannerRotator();">bannerRotator</button>
<button onclick="window.clearTimeout(hTimer);">clearTimeout</button>
</body>
</html>

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück