kostenloser Webspace werbefrei: lima-city


Einfache Slideshow

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    seth93

    seth93 hat kostenlosen Webspace.

    Hi,
    ich möchte gerne eine einfache Slideshow machen.
    Könnt ihr mir sagen, was für Funktionen ich mir da alles anschauen muss.
    Die Slideshow sollte automatisch laufen und alle Bilder eines Ordner einfach anzeigen und in regelmäßigen Abständen verändern.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Ich weiß nicht, ob du sowas suchst, ist nur Quelltext
    <script type="text/javascript">
    
    
    
    var trans_width='700px'
    
    
    var trans_height='525px'
    
    var pause=3000
    
    
    var degree=10
    
    var slideshowcontent=new Array()
    
    
    // Syntax: grafik, optionaler Link, optionales Ziel (target)
    
    
    slideshowcontent[0]=["LINKLINKLINKLINK", ""]
    slideshowcontent[1]=["LINKLINKLINKLINK", ""]
    slideshowcontent[2]=["LINKLINKLINKLINK", "", ""]
    slideshowcontent[3]=["LINKLINKLINKLINK", ""]
    slideshowcontent[4]=["LINKLINKLINKLINK", ""]
    slideshowcontent[5]=["LINKLINKLINKLINK", ""]
    slideshowcontent[6]=["LINKLINKLINKLINK", ""]
    slideshowcontent[7]=["LINKLINKLINKLINK", ""]
    slideshowcontent[8]=["LINKLINKLINKLINK", ""]
    slideshowcontent[9]=["LINKLINKLINKLINK", ""]
    slideshowcontent[10]=["LINKLINKLINKLINK", ""]
    slideshowcontent[11]=["LINKLINKLINKLINK", ""]
    slideshowcontent[12]=LINKLINKLINKLINK", ""]
    
    
    var bgcolor=''
    
    var imageholder=new Array()
    for (i=0;i<slideshowcontent.length;i++){
    imageholder[i]=new Image()
    imageholder[i].src=slideshowcontent[i][0]
    }
    
    var ie4=document.all
    var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
    
    if (ie4||dom)
    document.write('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
    else if (document.layers){
    document.write('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>')
    }
    
    var curpos=trans_width*(-1)
    var curcanvas="canvas0"
    var curindex=0
    var nextindex=1
    
    function getslidehtml(theslide){
    var slidehtml=""
    if (theslide[1]!="")
    slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'
    slidehtml+='<img src="'+theslide[0]+'" border="0">'
    if (theslide[1]!="")
    slidehtml+='</a>'
    return slidehtml
    }
    
    function moveslide(){
    if (curpos<0){
    curpos=Math.min(curpos+degree,0)
    tempobj.style.left=curpos+"px"
    }
    else{
    clearInterval(dropslide)
    if (crossobj.filters)
    crossobj.filters.alpha.opacity=100
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=1
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])
    nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
    setTimeout("rotateslide()",pause)
    }
    }
    
    function rotateslide(){
    if (ie4||dom){
    resetit(curcanvas)
    crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    if (crossobj.filters)
    document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
    else if (crossobj.style.MozOpacity)
    document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
    var temp='setInterval("moveslide()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else if (document.layers){
    crossobj.document.write(getslidehtml(slideshowcontent[curindex]))
    crossobj.document.close()
    }
    curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0
    }
    
    function jumptoslide(which){
    curindex=which
    rotateslide()
    }
    
    function resetit(what){
    curpos=parseInt(trans_width)*(-1)
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    crossobj.style.left=curpos+"px"
    }
    
    function startit(){
    crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
    if (ie4||dom){
    crossobj.innerHTML=getslidehtml(slideshowcontent[curindex])
    rotateslide()
    }
    else{
    document.tickernsmain.visibility='show'
    curindex++
    setInterval("rotateslide()",pause)
    }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", startit, false)
    else if (window.attachEvent)
    window.attachEvent("onload", startit)
    else if (ie4||dom||document.layers)
    window.onload=startit
    
    </script>
    
    </body></html>





  4. Verschoben nach HTML & Javascript.

    PHP ist dafür gänzlich ungeeignet.
  5. kalinawalsjakoff

    Kostenloser Webspace von kalinawalsjakoff

    kalinawalsjakoff hat kostenlosen Webspace.

    hab ich zwar in nem anderen thread schonmal vorgeschlagen aber probiers mal mit zphoto aber onb das automatisch weiterblättert mußte mal versuchen.
  6. Ich empfehle dir die lightbox ( guck auf meiner seite : http://psgdjugend.lima-city.de/6.12.08.html )

    hier der link ( zur ersten version ) : http://www.huddletogether.com/projects/lightbox/

    hier der link ( zur zweiten version ) : http://www.lokeshdhakar.com/projects/lightbox2/

    --------------------------------------------------------------------------------------------
    edit : auf meiner seite ist keine slideshow aber es klappt mit der lightbox

    Beitrag geändert: 8.1.2009 21:29:36 von psgdjugend

    Beitrag geändert: 8.1.2009 21:29:52 von psgdjugend
  7. Ich kann dir nur Shadowbox, den Nachfolger von Lightbox empfehlen.
    http://www.mjijackson.com/shadowbox/

    in der Api (http://www.mjijackson.com/shadowbox/doc/api.html)stehen die Funktionen, die du extern aufrufen kannst. U. a. auch next() um zum nächsten bild zu springen.

    Gruß, Prog
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!