0

I have found some websites, they show the pictures like marquee, but not exaclty marquee. Not continuously moving from bottom to top.

Instead, moving from bottom show one picture and then stop a few seconds and then moving again! What is that function and the code? Thanks!

Edited by cliffcc: n/a

3
Contributors
9
Replies
10
Views
6 Years
Discussion Span
Last Post by cliffcc
0

Because you ask it so friendly:

In the html, change left:-600px; to top:-450px;
JS:

var sImgArray = [];

function show()
{
    sImgArray = ["imgLaVera", "imgAlmanzor", "imgRosarito", "imgBaile"];
  
    // select elements by their id and replace them in the array
    for (var i = sImgArray.length; i--;) {
      sImgArray[i] = document.getElementById( sImgArray[i] );
    }

    iImg = sImgArray.length - 1;
    setTimeout('playShow(0,' + iImg + ')', 0);
}

function playShow(iVisible, iImgs)
{
    if( iVisible < iImgs )
        iLeft = iVisible + 1;
    else
        iLeft = 0;
        
    imgLeft = sImgArray[iLeft];
    imgLeft.style.top = "-" + imgLeft.height + "px";
    playMove(-imgLeft.height, iVisible, iImgs);
}

function playMove(i, iVisible, iImgs)
{
    if( iVisible < iImgs )
        iLeft = iVisible + 1;
    else
        iLeft = 0;
        
    imgLeft  = sImgArray[iLeft];
    imgRight = sImgArray[iVisible];
    
    if( i < 0 )
    {
        i = i + 1;
        imgLeft.style.top = (i - 2) + "px";
        imgRight.style.top = (i + imgLeft.height) + "px";
        setTimeout('playMove(' + i + ', ' + iVisible + ',' + iImgs + ')', 15);
    }
    else
    {
        if( iVisible < iImgs )
            iVisible = iVisible + 1;
        else
            iVisible = 0;
        setTimeout('playShow(' + iVisible + ',' + iImgs + ')', 4000);
    }
}

Edited by twiss: n/a

0

Thanks! but not top to bottom, how about bottom to top ? actually what is the varibles to control the direction!

0

Bottom to top is not so easy with this script, you'll need to rewrite it quite a bit. Try yourself, first? And perhaps jQuery is a bit overkill for something simple like this?

0

Maybe. However, it does have a animation. Vanilla js tends to be a little rough as there's no easing. Vertical slideshows leave me cold.

0

Yes, that's true. With those large images, I would find easing a bit chaotic, but for small ones it's nice I guess.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.