• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Marquee Image Slider

M

mrfloppi

Neues Mitglied
Hallo Community,

ich wollte euch hier mein Projekt vorstellen, und euch gleichzeitig um eure Meinung fragen: Marque Image Slider Demo
Das Ganze ist auf dem <marquee> HTML-Tag basierend, wird mit einem kleinen Javascript gesteuert und per CSS in Form gebracht.

Meiner Meinung nach läuft das Ganze schneller und ressourcensparender als das zur Vorlage stehende "jCarousel"!
Was haltet ihr davon, kann man das so hernehmen oder ist es eine schlechte Idee?

Bin offen für eure Kritik und Verbesserungsvorschläge! :D

LG, Flo

Edit: Das von mermshaus angesprochene Problem / Bug wurde behoben. Der Slider ist jetzt Firefox/Chrome/Safari kompatibel.

Hier ist der Quellcode für Euch, aber am besten geht ihr auf den Demo-Link und seht es euch dort an:

HTML:
HTML: 
<div id="ImageSlider">            <img class="SliderArrow" src="images_/imageslider/left.png" alt="scroll_left" title="Scroll backwards" width="34" height"40" onmousedown="scroll_right(); scroll_fast()" onmouseup="scroll_slow()">                <marquee id="imagemarquee" scrollamount="1" scrolldelay="10" width="670" height="112" behavior="alternate">                    <!-- Elemente zum Durchsliden-->                    <a href="#"><img class="WidePicture" src="images_/testpics/1.jpg" alt="testimg" title="testimg 01" width="100" height="66" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="WidePicture" src="images_/testpics/2.jpg" alt="testimg" title="testimg 02" width="100" height="66" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="HighPicture" src="images_/testpics/d.jpg" alt="testimg" title="testimg 03" width="66" height="100" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="WidePicture" src="images_/testpics/3.jpg" alt="testimg" title="testimg 04" width="100" height="66" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="WidePicture" src="images_/testpics/4.jpg" alt="testimg" title="testimg 05" width="100" height="66" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="WidePicture" src="images_/testpics/5.jpg" alt="testimg" title="testimg 06" width="100" height="66" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="HighPicture" src="images_/testpics/e.jpg" alt="testimg" title="testimg 07" width="66" height="100" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="WidePicture" src="images_/testpics/6.jpg" alt="testimg" title="testimg 08" width="100" height="66" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="WidePicture" src="images_/testpics/7.jpg" alt="testimg" title="testimg 09" width="100" height="66" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="HighPicture" src="images_/testpics/f.jpg" alt="testimg" title="testimg 10" width="66" height="100" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="WidePicture" src="images_/testpics/8.jpg" alt="testimg" title="testimg 11" width="100" height="66" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="WidePicture" src="images_/testpics/9.jpg" alt="testimg" title="testimg 12" width="100" height="66" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="HighPicture" src="images_/testpics/g.jpg" alt="testimg" title="testimg 13" width="66" height="100" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="WidePicture" src="images_/testpics/c.jpg" alt="testimg" title="testimg 14" width="100" height="66" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                    <a href="#"><img class="HighPicture" src="images_/testpics/h.jpg" alt="testimg" title="testimg 15" width="66" height="100" onmouseover="stop_scrolling()" onmouseout="start_scrolling()"></a>                </marquee>           <img class="SliderArrow" src="images_/imageslider/right.png" alt="scroll_right" title="Scroll forwards" width="34" height"40" onmousedown="scroll_left(); scroll_fast()" onmouseup="scroll_slow()">        </div>

CSS:
HTML: 
body{    background-color:#333333;    text-align:center;}#ImageSlider{    height:112px;    width:748;    border:1px solid #3333333;    margin:auto;}.SliderArrow{    cursor:pointer;    margin-bottom:36px;}.HighPicture{    border-top:solid 6px #222222;    border-bottom:solid 6px #222222;    border-left:solid 23px #222222;    border-right:solid 23px #222222;}.WidePicture{    border-top:solid 23px #222222;    border-bottom:solid 23px #222222;    border-left:solid 6px #222222;    border-right:solid 6px #222222;}
JAVASCRIPT:
Code: 
function scroll_left(){
    document.getElementById('imagemarquee').direction='left';
}
function scroll_right(){
    document.getElementById('imagemarquee').direction='right';
}
function scroll_fast(){
    javascript:document.getElementById('imagemarquee').scrollAmount=20;
}
function scroll_slow(){
    javascript:document.getElementById('imagemarquee').scrollAmount=1;
}
function stop_scrolling(){
    javascript:document.getElementById('imagemarquee').scrollAmount=0;
}
function start_scrolling(){
    javascript:document.getElementById('imagemarquee').scrollAmount=1;
}
 
Zuletzt bearbeitet:
Willkommen im Forum.

Das marquee-Element ist nicht standardkonform und bei mir im Firefox funktioniert das Beispiel nicht so, wie es vermutlich soll. (Nach dem schnellen Scrollen springt das Element zurück zu der Stelle, die es mit langsamem Scrollen erreicht hätte.)

Ich möchte deinen Einsatz wirklich nicht schmälern, aber ich würde niemandem empfehlen, das zu verwenden.
 
Ich kenne ähnliches ohne marquee auch mit JavaScript (jQuery) in besser Quellcode-Form. Der Rückwechsel an den Anfang stört, sowas geht auch besser (z.B. mit besagten jQuery-Scripten). Schließe mich meinem Vorredner daher an.
 
Vielen Dank für eure Rückmeldungen. Schande über meinen non Cross-Browser kompatiblen Code!
Falls ihr Chrome besitzt: Dort funktioniert es Einwandfrei. Schade, das es nicht klappt.

Die Idee währe gewesen, diesen Slider zu verwenden, da er für Suchmaschienen lesbaren Quellcode beinhaltet im Gegensatz zu JQuery-Scripten.

LG, Flo
 
Danke mermshaus!

Ich habe den Code so angepasst, das es jetzt auch auf Firefox funktioniert!
Schuld war ein in Firefox anders interpretierter Teil im JavaScript.

Better Marquee Image Slider

Grüße Flo

mermshaus schrieb:
Willkommen im Forum.

Das marquee-Element ist nicht standardkonform und bei mir im Firefox funktioniert das Beispiel nicht so, wie es vermutlich soll. (Nach dem schnellen Scrollen springt das Element zurück zu der Stelle, die es mit langsamem Scrollen erreicht hätte.)

Ich möchte deinen Einsatz wirklich nicht schmälern, aber ich würde niemandem empfehlen, das zu verwenden.
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Ich geh jetzt mal nicht auf die noch bestehenden Bedenken der beiden Vorposter ein.
Was mich, abgesehen vom Einsatz der MS-Erfindung <marquee> stören würde:
Man scrollt dauerhaft nach rechts. Dann ist der Slider am Ende und er scrollt nach links, obwohl man nach rechts drückt, statt wieder von vorne anzufangen.
Nicht sehr schön.
 
Weiß nicht, ob das so rüberkam, aber meine Hauptkritik ist nicht das Scrollverhalten, sondern das marquee-Element selbst. Es entspricht nun mal nicht dem Standard. Mehr gibt es dazu eigentlich nicht zu sagen.

mrfloppi schrieb:
Schande über meinen non Cross-Browser kompatiblen Code!
Zum Vergrößern anklicken....

Na ja, selbst wenn alle denkbaren Clients das Element gleichartig darstellen würden, entspräche es nicht dem Standard.

Du kannst natürlich argumentieren: „Mir egal, die wichtigen Browser implementieren es.“ Aber du wirst dann mit dem Risiko leben müssen, dass es irgendwann ein wichtiger Client nicht mehr tut. Ich halte das nicht für vernünftig und würde deshalb wie gesagt jedem davon abraten, eine solche Variante einzusetzen.

Die Idee währe gewesen, diesen Slider zu verwenden, da er für Suchmaschienen lesbaren Quellcode beinhaltet im Gegensatz zu JQuery-Scripten.
Zum Vergrößern anklicken....

Du könntest den Slider-Inhalt als Liste rendern und per JavaScript onload zu einem Slider-Widget machen.

- Unobtrusive JavaScript
 
Space Vampire schrieb:
Ich geh jetzt mal nicht auf die noch bestehenden Bedenken der beiden Vorposter ein.
Was mich, abgesehen vom Einsatz der MS-Erfindung <marquee> stören würde:
Man scrollt dauerhaft nach rechts. Dann ist der Slider am Ende und er scrollt nach links, obwohl man nach rechts drückt, statt wieder von vorne anzufangen.
Nicht sehr schön.
Zum Vergrößern anklicken....

Danke Space Vampire, der bug ist behoben. Funktioniert jetzt so wie erwartet!
 
So ein Slider auf jQuery-Basis ist auch SE-optimiert. Er kann auch eine Aufzählungsliste mit Bildern als Grundlage haben. Inkl. Alternativtexten und Beschriftungen.

Wie schon gesagt ist der Einsatz von marquee für sowas unnötig und auch nicht sehr nutzerfreundlich, wenn man das hin- und herscrollen sich so anschaut.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben