[JavaScript] Bilder "Newsticker" Vertikal.

badloader · 3. Mai 2010

Bilder "Newsticker" Vertikal.

Hi Leute,

ich komme hier absolut nicht weiter. JS ist einfach nicht soo mein Ding.

Ich brauche eine Sidebar in der vertikal einfach Bilder von oben nach untern laufen und dann wieder oben ansetzten.

Das runterlaufen funktioniert ja soweit alles. Ich komme nur nicht drauf, wie ich die Bilder wieder hoch bekomme und ich weiß nicht, wie man am besten die Dauerschleife macht.

Es handelt sich nur um 4 Bilder. Ich nehme auch gerne fertig Scripte an, habe nur nichts gefunden.

Mein Code ist mit Scriptaculous und Prototype entstanden.

PHP:

 
<div id="sidebar">

    <ul>

    <?php  for( $i = 1 ;  $i < 5 ;  $i ++):  ?>

         <li id="setimage<?php  echo  $i ;  ?>">

            <a href="#set<?php  echo  $i ;  ?>" title="Set <?php  echo  $i ;  ?>">

                <img src="/images/sets/<?php  echo  $i ;  ?>/preview.png" alt="SET <?php  echo  $i ;  ?>" title="Preview for Set <?php  echo  $i ;  ?>" />

            </a>

        </li>

    <?php  endfor;  ?>

     </ul>

</div>

Code:

/**
 * If dom is loaded start javascript functions
 */
document.observe("dom:loaded", function() {
 changeSidebarHeight();
 startSlideShow();
});

/**
 * Change the Sidebarheight, that we can use
 * it for slideshow.
 * 
 * @return void
 */
function changeSidebarHeight() {
 var windowHeight = document.viewport.getHeight();
 $('sidebar').setStyle({height: windowHeight+'px'});
}


function startSlideShow() {
 for (var i=4; i>0; i--) {
 slideDown(i);
 window.setTimeout('getUp('+i+')', 20*60);
 }
}

function getUp(i) {
 alert(i)
 $('setimage'+i).setStyle({top: -150});
 slideDown(i);
}

function slideDown(i) {
 new Effect.Move('setimage'+i, {
 x: 0, y: document.viewport.getHeight(),
 mode: 'absolute',
 duration: 20
 });
}

Anzeige

powernator · 3. Mai 2010

AW: Bilder "Newsticker" Vertikal.

Was spricht gegen marquee?

°EraZoR° · 3. Mai 2010

AW: Bilder "Newsticker" Vertikal.

Also ich kann deine Frage nur für mich beantworten^^
Marquee laggt bei mir wie sau..
Und das schon mit Text... Und mit Javascript laggt es nicht..
Und das liegt bei mir denke ich nicht am Prozessor oder Graka..

MfG

badloader · 3. Mai 2010

AW: Bilder "Newsticker" Vertikal.

Ne marquee möchte ich nicht benutzen. Weiß zwar nicht wie weit es zurück geht, aber der Kunde will auch alte Browser unterstützt haben.

Es ruckelt sogar bei mir. Aber danke für den Tipp - auch wenn er mir nicht hilft

badloader · 4. Mai 2010

AW: Bilder "Newsticker" Vertikal.

Sooo jetzt habe ich schon immerhin ein wenig geschafft und hoffe auf eure Hilfe.

Problem:
Die Bilder laufen nicht Gleichzeitig. Bremsen und Beschleunigen.
Die Bilder laufen durcheinander

Html bleibt gleich.
CSS bleibt gleich
Javascript:

Code:

/**
 * If dom is loaded start javascript functions
 */
document.observe("dom:loaded", function() {
 changeSidebarHeight();
 startSliding();
});

/**
 * Change the Sidebarheight, that we can use
 * it for slideshow.
 * 
 * @return void
 */
function changeSidebarHeight() {
 var windowHeight = document.viewport.getHeight();
 $('sidebar').setStyle({height: windowHeight+'px'});
}



var stopSlide = false;

function startSliding() {
 
 k = 0;
 for (var i=1; i<5; i++) {
 $('setimage'+i).setStyle({
 top: k+'px',
 position: 'absolute'
 });
 k += 180;
 }
 
 for (var i=4; i>0; i--) {
 slideDown('setimage'+i);
 }
}

function slideDown(id) {
 
 if (stopSlide == true) {
 return false;
 }
 
 // check if div is already moving
 var offset = $(id).positionedOffset();
 var currentHeight = offset[1];
 
 // where does it have to go?
 var goDown = document.viewport.getHeight() - currentHeight;
 
 // move it down
 new Effect.Move(id, {
 mode: 'absolute',
 x: 0,
 y: goDown,
 duration: 10,
 queue: { position: 'front', scope: id },
 afterFinish: function () { putItUp(id); }
 });
 
}

function putItUp(id) {
 $(id).setStyle({top: '-150px'});
 slideDown(id);
}

function stopSliding() {
 for (var i=1; i<5; i++) {
 Effect.Queues.get('setimage'+i).invoke('cancel');
 }
 
 stopSlide = true;
 return true;
}

function resumeSliding() {
 stopSlide = false;
 startSliding();
 return true;
}

Nützliche Suchen

[JavaScript] Bilder "Newsticker" Vertikal.

Videos zum Themenbereich