patternjavascriptMinor
Vertical cycle slideshow
Viewed 0 times
cycleverticalslideshow
Problem
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
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();Solution
I found your code a little hard on the eyes because of the lack of formatting.
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);
}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);
}Code Snippets
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);
}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);
}Context
StackExchange Code Review Q#125607, answer score: 2
Revisions (0)
No revisions yet.