slideshow

se1811 · 23.07.2004, 15:15

ich möchte für ne hp ne kleine slide show mit fotos machen. das soll so nen filmstreifen sein wo halt die fotos durchlaufen und wenn man mit der maus darüberfährt soll der streifen anhalten!

weiß einer von euch wie das geht?

mfg stefan

Thomas · 23.07.2004, 16:12

sollte mit Flash am einfachsten zu machen sein

hero-master · 23.07.2004, 16:17

Zitat:

Zitat von Thomas

sollte mit Flash am einfachsten zu machen sein

Geht aber auch mit JS

HTML-Code:

<script language="JavaScript1.2">




//Specify the slider's width (in pixels)
var sliderwidth="500px"
//Specify the slider's height
var sliderheight="200px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=2

//configure background color:
slidebgcolor="#000000"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="#"><img src="photos_stuttgart/ente_stuttgart.jpg"></a>&nbsp;'
leftrightslide[1]='<a href="#"><img src="photos_stuttgart/herbst_gans.jpg"></a>&nbsp;'
leftrightslide[2]='<a href="#"><img src="photos_stuttgart/herbst_stuttgart_2.jpg"></a>&nbsp;'
leftrightslide[3]='<a href="#"></a>&nbsp;'
leftrightslide[4]='<a href="#"><img src="photos_stuttgart/herbst_stuttgart.jpg"></a>&nbsp;'
leftrightslide[5]='<a href="#"><img src="photos_stuttgart/matze_stuttgart.jpg"></a>&nbsp;'
leftrightslide[6]='<a href="#"><img src="photos_stuttgart/reiher_stuttgart.jpg"></a>&nbsp;'



////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+20+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+20
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+30

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+30
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

se1811 · 23.07.2004, 18:16

könntest du mir auch den passenden html body dazu geben? bin auf dieser ebene absolut neu! thx

mfg stefan

hero-master · 23.07.2004, 19:38

Zitat:

Zitat von se1811

könntest du mir auch den passenden html body dazu geben?

Dieses Script fügst du dort in den Body-BEreich ein, wo du die Slideshow hinhaben willst

se1811 · 23.07.2004, 20:22

icch hab jetzt einfacj das html grundgerüst genommen und in den bodybereich das script eingefügt! es geht aber net!

nur wiso? hier is der code :

HTML-Code:

<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<script language="JavaScript1.2">




//Specify the slider's width (in pixels)
var sliderwidth="500px"
//Specify the slider's height
var sliderheight="200px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=2

//configure background color:
slidebgcolor="#000000"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="#"><img src="DSC00673.JPG" width="640" height="480"></a>&nbsp;'
leftrightslide[1]='<a href="#"><img src="DSC00682.JPG" width="640" height="480"></a>&nbsp;'

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftr  ightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+20+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slideme  nu2
ns_slide2=document.ns_slidemenu.document.ns_slidem  enu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.?????A?º??left=actualwidth+20
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.  left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style  .left)+actualwidth+30+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.styl  e.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style  .left)+actualwidth+30+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+30

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+30
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+s  liderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+s  liderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
</body>
</html>

hero-master · 23.07.2004, 20:37

Zitat:

ns_slide2.?????A?º??left=actualwidth+20

Da wurde irgendwie was falsches übertragen beim kopieren

Ändere das mal in

Code:

ns_slide2.left=actualwidth+20

um

se1811 · 23.07.2004, 20:44

ghet trotzddem net! mach dir doch bitte mal die arbeit und mach das ding ordentlich mit verlink bildern aus dem netzt fertig! bitte bitte! dauert doch nur 2 min! thx

mfg stefan

hero-master · 23.07.2004, 21:20

Ja, Sir

http://www.nicogutmann.de/slide/portfolio.htm

Hatte ich auf meiner ersten "Portfolio-Seite" ,aslo nix neues gemacht

321 · 26.12.2004, 01:25

Wenn man hier im Forum aus HTML-Code-Boxen kopiert
kommt es oft vor, dass unerwünschte Blanks im Text erscheinen,

zB.

HTML-Code:

cross_slide.innerHTML=cross_slide2.innerHTML=leftr    ightslide

<edit>
nachdem ich etwa 10 solche Fehler behob, funktioniert nun das Script einwandfrei
</edit>