3
\$\begingroup\$

I want to make a vertical cycle slideshow. This works perfectly for me but I'm just wondering if it's possible to achieve the same functioning with a better code. I don't know if my code would provoke a problem in some situations or not.

jsFiddle

var pare = $('#slider'); // selecting the holder element;
var ob = $('#slider > li'); // selecting items to handle;
var elm_show = 3; //  number of imgs to show at once; 
var spd = 1000; // spd of scrolling;

var nex = ob.eq(0).height(); 
var leng = ob.length;
var jleng = leng-1;


ob.eq(jleng).css('top',-1*(leng*nex));// returning the last item to the first case;        
pare.height(nex*elm_show); // define the holder length to display the desired number of item to be shown;

function anime(){
ob.each(function(i,item){$(item).animate({"top":"+="+nex+"px"},spd,         

    "linear",function(){if ($(item).position().top == jleng*nex)
   {$(item).css('top',-1*nex*(i+1))}});})
 setTimeout(anime, 0);
 }

 anime();   
\$\endgroup\$
2
\$\begingroup\$

I found your code a little hard on the eyes because of the lack of formatting.

function anime(){
ob.each(function(i,item){$(item).animate({"top":"+="+nex+"px"},spd,   


  "linear",function(){if ($(item).position().top == jleng*nex)
{$(item).css('top',-1*nex*(i+1))}});})
setTimeout(anime, 0);
}

Here is what it looks like with good formatting

function anime(){
    ob.each(function(i,item){
        $(item).animate( 
            {"top":"+="+nex+"px"},
            spd,
            "linear",
            function(){
                if ($(item).position().top == jleng*nex) {
                    $(item).css('top',-1*nex*(i+1))
                }
            }
        );
    })
    setTimeout(anime, 0);
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.