Bildlaufleiste vertikal

Dieses Javascript funktioniert ähnlich wie die andere Bildlaufleiste, allerdings werden die Bilder hier nicht horizontal, sondern vertikal gescrollt. Auch die Richtung (nach oben oder nach unten) ist im Script einstellbar über die Variable slidedir.

Auch hier müsst ihr die Bilder im Script anpassen (es muss der richtige Pfad zum Bild angegeben werden). Die entsprechende Stelle ist dazu markiert (einfach mal die ersten Zeilen in dem Javascript anschauen und ihr findet es von alleine).

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> var sliderwidth = 220; // Breite des Sliders var sliderheight = 250; // Höhe des Sliders var slidespeed = 1; // Geschwindigkeit des Sliders var slidebgcolor = "#FFFFFF"; // Hintergrundfarbe var slidedir = "runter"; // Richtung - "hoch" oder "runter" var leftrightslide = new Array(); var copyspeed = slidespeed; var i = 0; /* HIER DIE LINKS UND BILDER ANPASSEN*/ leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0001"><img src="_files/images/thumbs/0001.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0004"><img src="_files/images/thumbs/0004.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0005"><img src="_files/images/thumbs/0005.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0006"><img src="_files/images/thumbs/0006.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0010"><img src="_files/images/thumbs/0010.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0011"><img src="_files/images/thumbs/0011.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0012"><img src="_files/images/thumbs/0012.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0013"><img src="_files/images/thumbs/0013.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0014"><img src="_files/images/thumbs/0014.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0015"><img src="_files/images/thumbs/0015.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0016"><img src="_files/images/thumbs/0016.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0023"><img src="_files/images/thumbs/0023.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0024"><img src="_files/images/thumbs/0024.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0026"><img src="_files/images/thumbs/0026.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0027"><img src="_files/images/thumbs/0027.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0030"><img src="_files/images/thumbs/0030.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0031"><img src="_files/images/thumbs/0031.jpg" style="border-color: black;"></a></div>'; leftrightslide[i++] = '<div><a href="index.php?option=com_wallpapers&task=showSingleThumb&id=162&Itemid=44&pic=0033"><img src="_files/images/thumbs/0033.jpg" style="border-color: black;"></a></div>'; /* AB HIER NICHTS MEHR ÄNDERN */ //leftrightslide = '<nobr>' + leftrightslide.join("") + '</nobr>'; leftrightslide = leftrightslide.join(""); var iedom = document.all || document.getElementById; if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;left:-100px;top:-3000px">' + leftrightslide + '</span>'); var actualheight = ''; 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; actualheight=document.all? cross_slide.offsetHeight : document.getElementById("temp").offsetHeight; cross_slide2.style.top=actualheight+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(); actualheight=ns_slide.document.height; ns_slide2.top=actualheight+20; ns_slide2.document.write(leftrightslide); ns_slide2.document.close(); } if ( slidedir == "hoch" ) { lefttime=setInterval("slidetop()",30); } else { lefttime=setInterval("slidedown()",30); } } window.onload=fillup; function slidetop(){ if (iedom){ if (parseInt(cross_slide.style.top)>(actualheight*(-1)+8)) cross_slide.style.top=parseInt(cross_slide.style.top)-copyspeed+"px"; else cross_slide.style.top=parseInt(cross_slide2.style.top)+actualheight+"px"; if (parseInt(cross_slide2.style.top)>(actualheight*(-1)+8)) cross_slide2.style.top=parseInt(cross_slide2.style.top)-copyspeed+"px"; else cross_slide2.style.top=parseInt(cross_slide.style.top)+actualheight+"px"; } else if (document.layers){ if (ns_slide.top>(actualheight*(-1)+8)) ns_slide.top-=copyspeed; else ns_slide.top=ns_slide2.top+actualheight; if (ns_slide2.top>(actualheight*(-1)+8)) ns_slide2.top=copyspeed; else ns_slide2.top=ns_slide.top+actualheight; } } function slidedown(){ if (iedom){ if (parseInt(cross_slide.style.top)<(actualheight-8)) cross_slide.style.top=parseInt(cross_slide.style.top)+copyspeed+"px"; else cross_slide.style.top=parseInt(cross_slide2.style.top)-actualheight+"px"; if (parseInt(cross_slide2.style.top)<(actualheight-8)) cross_slide2.style.top=parseInt(cross_slide2.style.top)+copyspeed+"px"; else cross_slide2.style.top=parseInt(cross_slide.style.top)-actualheight+"px"; } else if (document.layers){ if (ns_slide.top>(actualheight*(-1)+8)) ns_slide.top-=copyspeed; else ns_slide.top=ns_slide2.top+actualheight; if (ns_slide2.top>(actualheight*(-1)+8)) ns_slide2.top=copyspeed; else ns_slide2.top=ns_slide.top+actualheight; } } if (iedom||document.layers){ with (document){ document.write('<table border="0" cellspacing="0" cellpadding="0"><td>'); if (iedom){ document.write('<div style="position:relative;width:' + sliderwidth + 'px;height:' + sliderheight + 'px;overflow:hidden">'); document.write('<div style="position:absolute;width:' + sliderwidth + 'px;height:' + sliderheight + 'px;background-color:' + slidebgcolor + '" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">'); document.write('<div id="test2" style="position:absolute;left:0;top:0"></div>'); document.write('<div id="test3" style="position:absolute;top:-1000;left:0"></div>'); document.write('</div></div>'); } else if (document.layers){ document.write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>'); document.write('<layer name="ns_slidemenu2" left=0 top=0 onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed"></layer>'); document.write('<layer name="ns_slidemenu3" left=0 top=0 onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed"></layer>'); document.write('</ilayer>'); } document.write('</td></table>'); } } //--> </script> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/bilder/bildlaufleiste-vertikal/" target="_blank">kostenlose-javascripts.de</a> <!-- präsentiert von kostenlose-javascripts.de -->