javascript - Vise tilfældig .php-/.htmlside - Udvikleren.dk

Tags: javascript

Bruger #10877 @ 23.03.10 11:32

Hej.

Jeg har fundet et gammel javascript frem, som kan skifte mellem en række billeder i et tidsinterval. Koden ligger som "kode 1".
Billederne kommer frem i samme rækkefølge hver gang, men jeg så gerne at de kom i en tilfældig rækkefølge. Jeg har forsøgt at erstatte i i loopet med
"Math.floor(Math.random()*variableslide.length)"
men det får ikke rækkefølgen til at være tilfældig... (se kode 2)

Jeg prøvede så istedet at erstatte stykket
var currentslide=0

med

var currentslide=Math.random()*variableslide.length

Det gjorde at rækkefølgen stadig var den samme, men begyndelsespunktet var tilfældigt.

Men hvordan kan jeg få den til at have rækkefølgen helt tilfældig?

Og kan jeg få koden til at vise en .php-side eller .html-side i stedet for billeder?
Hvilket objekt skal det så være?:
"var cacheimage=new Image()"

Håber nogen kan hjælpe

Kode 1:

<script language="JavaScript1.2">
/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['Img/Max.jpg', '', '']
variableslide[1]=['Img/Nanna.jpg', '', '']
variableslide[2]=['Img/Oel.jpg', '', '']
variableslide[3]=['Img/Ole.jpg', '', '']
variableslide[4]=['Img/Stine.jpg', '', '']
variableslide[5]=['Img/Rasmus.jpg', '', '']
variableslide[6]=['Img/Tri.jpg', '', '']
variableslide[7]=['Img/Max2.jpg', '', '']
variableslide[8]=['Img/Nanna2.jpg', '', '']
variableslide[9]=['Img/Ole2.jpg', '', '']
variableslide[10]=['Img/Rasmus2.jpg', '', '']
variableslide[11]=['Img/Stine2.jpg', '', '']
variableslide[12]=['Img/Ole3.jpg', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='25px' //set to width of LARGEST image in your slideshow
var slideheight='25px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#00000'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=1000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>

Kode 2:

for (i=0;i<variableslide.length;i++){

var cacheimage=new Image()
cacheimage.src=variableslide[Math.floor(Math.random()*variableslide.length)][0]
}

////resten af koden er uændret i forhold til Kode 1 ///

1 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 1 karma

Sorter efter stemmer Sorter efter dato

Bruger #10584 @ 24.03.10 10:19

Har lavet noget lidt lign. hvor jeg først åbner 3*3 tilfældige billeder og derefter for dem til at fade over hinanden(der vises 3 billeder af gangen).

Kig på den nederste del, i php-afsnittet, hvor der udvælges billeder:

Kode

<style type="text/css">
#imageContainer1 {
	position:relative;
	left:0px;
	margin:auto;
	width:318px;
	height:226px;
	float:left;
}

#imageContainer1 img {
	display:none;
	position:absolute;
	top:0; left:0;
}

#imageContainer2 {
	position:relative;
	left:3px;
	margin:auto;
	width:319px;
	height:226px;
	float:left;
}

#imageContainer2 img {
	display:none;
	position:absolute;
	top:0; left:0;
}

#imageContainer3 {
	position:relative;
	left:6px;
	margin:auto;
	width:318px;
	height:226px;
	float:left;
}

#imageContainer3 img {
	display:none;
	position:absolute;
	top:0; left:0;
}
</style>
<script type="text/javascript">
window.addEventListener?window.addEventListener("load",init,false):window.attachEvent("onload",init);

var d=document, imgs1 = new Array(), imgs2 = new Array(), imgs3 = new Array(), current1=0,  current2=0,  current3=0;

function init() {
	if(!d.getElementById || !d.createElement)return;
	
	//indsætter billeder i et array
	imgs1 = d.getElementById("imageContainer1").getElementsByTagName("img");
	imgs2 = d.getElementById("imageContainer2").getElementsByTagName("img");
	imgs3 = d.getElementById("imageContainer3").getElementsByTagName("img");
	
	//gør alle billeder usynlige
	for(i=1;i<imgs1.length;i++) imgs1[i].xOpacity = 0;
	for(i=1;i<imgs2.length;i++) imgs2[i].xOpacity = 0;
	for(i=1;i<imgs3.length;i++) imgs3[i].xOpacity = 0;
	
	//vis første billede
	imgs1[0].style.display = "block";
	imgs1[0].xOpacity = .99;
	imgs2[0].style.display = "block";
	imgs2[0].xOpacity = .99;
	imgs3[0].style.display = "block";
	imgs3[0].xOpacity = .99;
	
	//start fade køen
	next_xfade(0);
}

function next_xfade(last) {
	do
	{
		rand = Math.floor((3-0)*Math.random()) + 1
   }
	while (rand==last);
	
	switch (rand)
	{
		case (rand = 1):
			setTimeout(xfade1,1000);
		break
		case (rand = 2):
			setTimeout(xfade2,1000);
		break
		default:
			setTimeout(xfade3,1000);
		break
	}
}

function xfade1() {
	cOpacity = imgs1[current1].xOpacity;
	nIndex = imgs1[current1+1]?current1+1:0;

	nOpacity = imgs1[nIndex].xOpacity;
	
	cOpacity-=.03; 
	nOpacity+=.03;
	
	imgs1[nIndex].style.display = "block";
	imgs1[current1].xOpacity = cOpacity;
	imgs1[nIndex].xOpacity = nOpacity;
	
	setOpacity(imgs1[current1]); 
	setOpacity(imgs1[nIndex]);
	
	if(cOpacity<=0) {
		imgs1[current1].style.display = "none";
		current1 = nIndex;
		next_xfade(1);
	} else {
		setTimeout(xfade1,30);
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
	
}

function xfade2() {
	cOpacity = imgs2[current2].xOpacity;
	nIndex = imgs2[current2+1]?current2+1:0;

	nOpacity = imgs2[nIndex].xOpacity;
	
	cOpacity-=.03; 
	nOpacity+=.03;
	
	imgs2[nIndex].style.display = "block";
	imgs2[current2].xOpacity = cOpacity;
	imgs2[nIndex].xOpacity = nOpacity;
	
	setOpacity(imgs2[current2]); 
	setOpacity(imgs2[nIndex]);
	
	if(cOpacity<=0) {
		imgs2[current2].style.display = "none";
		current2 = nIndex;
		next_xfade(2);
	} else {
		setTimeout(xfade2,30);
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
	
}

function xfade3() {
	cOpacity = imgs3[current3].xOpacity;
	nIndex = imgs3[current3+1]?current3+1:0;

	nOpacity = imgs3[nIndex].xOpacity;
	
	cOpacity-=.03; 
	nOpacity+=.03;
	
	imgs3[nIndex].style.display = "block";
	imgs3[current3].xOpacity = cOpacity;
	imgs3[nIndex].xOpacity = nOpacity;
	
	setOpacity(imgs3[current3]); 
	setOpacity(imgs3[nIndex]);
	
	if(cOpacity<=0) {
		imgs3[current3].style.display = "none";
		current3 = nIndex;
		next_xfade(3);
	} else {
		setTimeout(xfade3,30);
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
	
}
</script> 


<?php
//mappe med billeder
$folder = 'header-img/';

//valgte filtyper
$exts = 'jpg jpeg png gif';

$files = array(); $i = -1;
if ('' == $folder) $folder = './';

$handle = opendir($folder);
$exts = explode(' ', $exts);

//find filer
while (false !== ($file = readdir($handle))) {
foreach($exts as $ext) {
if (preg_match('/\.'.$ext.'$/i', $file, $test)) {
$files[] = $file;
++$i;
}
}
}
closedir($handle);

mt_srand((double)microtime()*1000000);

if (count($files)<9) {
echo "<h2>Til administator: Der er ikke nok billeder i 'header-img' til at oprette xfade-headeren (min 9)</h2>";
}else{
//udvælg billeder
$selectedfiles=array();
do {
	$rand = mt_rand(0, $i);
	$file = $files[$rand];
	
	if (!in_array($file,$selectedfiles))
	{
		array_unshift($selectedfiles,$file);
	}
} while (count($selectedfiles)<9);

//færdig html kode
echo "<div id='imageContainer1'>
	<img src='$folder$selectedfiles[0]' width='318px' height='226px' />
	<img src='$folder$selectedfiles[1]' width='318px' height='226px' />
	<img src='$folder$selectedfiles[2]' width='318px' height='226px' />
</div>
<div id='imageContainer2'>
	<img src='$folder$selectedfiles[3]' width='319px' height='226px' />
	<img src='$folder$selectedfiles[4]' width='319px' height='226px' />
	<img src='$folder$selectedfiles[5]' width='319px' height='226px' />
</div>
<div id='imageContainer3'>
	<img src='$folder$selectedfiles[6]' width='318px' height='226px' />
	<img src='$folder$selectedfiles[7]' width='318px' height='226px' />
	<img src='$folder$selectedfiles[8]' width='318px' height='226px' />
</div>
";
}
?>

Indlæg senest redigeret d. 24.03.2010 10:22 af Bruger #10584

Vise tilfældig .php-/.htmlside

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler