Sliding through divs at interval - jQuery
I have a list of around 30 divs (see below.) and would like to hear any suggestions on the best way to rotate through them by sliding in one at the top and removing one from the bottom at a set time. Something like every 5-10 seconds. Also even though there are 30 on the page I would only like to show a list of 10 and have the rest show as mentioned.
A great example would be www.foursquare.com and their recent activity section. I would like to do the same except with a predetermined amount of divs instead of real-time using ajax.
Any suggestions or a bit of help pointing me in the right direction would b开发者_开发问答e greatly appreciated.
<div class="recent-questions">
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
</div>
Thanks in advance for any help or thoughts!
Hey there... so I've modeled your entire problem into a new file. You should be able to tweak this to get what you need:
<html>
<head>
<title>Shift Test</title>
<style>
.recentQuestion { border: 1px solid blue; height: 50px; width: 150px; }
</style>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div style="overflow: hidden; height: 250px;">
<div class="recentQuestion" id="div0" style="display: none;">
This is some content 0.
</div>
<div class="recentQuestion" id="div1" style="display: none;">
This is some content 1.
</div>
<div class="recentQuestion" id="div2" style="display: none;">
This is some content 2.
</div>
<div class="recentQuestion" id="div3" style="display: none;">
This is some content 3.
</div>
<div class="recentQuestion" id="div4" style="display: none;">
This is some content 4.
</div>
<div class="recentQuestion" id="div5" style="display: none;">
This is some content 5.
</div>
<div class="recentQuestion" id="div6" style="display: none;">
This is some content 6.
</div>
<div class="recentQuestion" id="div7" style="display: none;">
This is some content 7.
</div>
<div class="recentQuestion" id="div8" style="display: none;">
This is some content 8.
</div>
<div class="recentQuestion" id="div9" style="display: none;">
This is some content 9.
</div>
<div class="recentQuestion" id="div10" style="display: none;">
This is some content 10.
</div>
<div class="recentQuestion" id="div11" style="display: none;">
This is some content 11.
</div>
<div class="recentQuestion" id="div12" style="display: none;">
This is some content 12.
</div>
<div class="recentQuestion" id="div13" style="display: none;">
This is some content 13.
</div>
<div class="recentQuestion" id="div14" style="display: none;">
This is some content 14.
</div>
<div class="recentQuestion" id="div15">
This is some content 15.
</div>
<div class="recentQuestion" id="div16">
This is some content 16.
</div>
<div class="recentQuestion" id="div17">
This is some content 17.
</div>
<div class="recentQuestion" id="div18">
This is some content 18.
</div>
<div class="recentQuestion" id="div19">
This is some content 19.
</div>
</div>
<br/>
<br/>
<br/>
<div style="border: 1px solid red; height: 30px; width: 200px;">
<a href="javascript:void(0);" id="pauseShifting">Pause / Resume</a>
</div>
<script type="text/javascript" language="javascript">
var intervalId = null;
var indicesToShow = new Array();
$(document).ready(function()
{
indicesToShow.push(15);
indicesToShow.push(16);
indicesToShow.push(17);
indicesToShow.push(18);
indicesToShow.push(19);
intervalId = setInterval(function()
{
shiftDivs();
}, 2000);
$('#pauseShifting').click(function()
{
if(intervalId != null)
{
clearInterval(intervalId);
intervalId = null;
}
else
{
shiftDivs();
intervalId = setInterval(function()
{
shiftDivs();
}, 2000);
}
});
});
function shiftDivs()
{
var newSetOfImages = new Array();
if(indicesToShow[0] == 0)
{
newSetOfImages.push(15);
newSetOfImages.push(16);
newSetOfImages.push(17);
newSetOfImages.push(18);
newSetOfImages.push(19);
for(var j = 0; j < 5; j++)
{
$('#div' + indicesToShow[j]).slideUp('fast');
$('#div' + newSetOfImages[j]).slideDown('fast');
}
indicesToShow = newSetOfImages;
return;
}
else
newSetOfImages.push(indicesToShow[0] - 1);
newSetOfImages.push(indicesToShow[0]);
newSetOfImages.push(indicesToShow[1]);
newSetOfImages.push(indicesToShow[2]);
newSetOfImages.push(indicesToShow[3]);
$('#div' + indicesToShow[4]).slideUp('fast');
$('#div' + newSetOfImages[0]).slideDown('fast');
indicesToShow = newSetOfImages;
}
</script>
</body>
</html>
This solution will automatically roll around to the beginning of the list when you reach the end as well.
It's not particulary jQuery specific, but you just need to use an interval in JavaScript.
function shiftDivs()
{
$('div:last').remove();
$('div:first').before(myNewDivElement); // Pseudo
}
setInterval(function()
{
shiftDivs();
}, 5000);
The interval function will be called every 5 seconds.
I'll give an example. If you won't be doing ajax, you'll probably want to start at the bottom of your 30 divs and move up. So we'll display divs 20 through 29. (assuming 0-29 div indices). You set up your html to initially have
style="display:none"
on divs 0-19. Then, you use this code:
var headIndex = 19;
var intervalId = null;
$(document).ready(function()
{
intervalId = setInterval(function()
{
shiftDivs();
if(headIndex == -1)
clearInterval(intervalId);
}, 5000);
});
function shiftDivs()
{
$($('div')[headIndex]).slideDown();
$($('div')[headIndex + 10]).slideUp();
headIndex--;
}
Additional pause example:
function pauseShift()
{
if(intervalId != null) // Currently Not Paused
{
clearInterval(intervalId);
}
else // Paused
{
ShiftDivs(); // Only include this if you want the shift to occur immediately on resume
intervalId = setInterval(function()
{
shiftDivs();
if(headIndex == -1)
clearInterval(intervalId);
}, 5000);
}
}
加载中,请稍侯......
精彩评论