I've used the "FeatureList" Jquery Plugin to make my own content slider.
The script can be found here: http://pastebin.com/7iyE5ADu
Here is an exemplificative image to show what I'm triyng to achieve: http://i41.tinypic.com/6jkeq1.jpg
Actually the sl开发者_StackOverflowider add a "current" class to an item (in the example the squares 1,2 and 3) and for each thumb show a content in the main area.
In the example, with an interval of 2 seconds, the script switch from 1 to 2, from 2 to 3, and so on.
I'd like to make a continuous animation of the thumbs, anyone can help me?
- DEMO: http://aseptik.net/demo/help-with-animation
$(function() {
//go trought each LI
$('#tabs > li').each(function(i) {
// and Add incremental ID to each one...
$(this).attr('id', i + 1);
});
//set interval... and call function
setInterval('swapImages()', 2000);
});
function swapImages() {
var images = ['junku','codepoet','rappensuncle','nuomi','jam343','kk','ccgd','xdjio'];
//count all LI's
var total_lis = $('#tabs > li').size();
// get the current LI ID based on where .current class...
var start_pos = parseInt($('#tabs li a.current').parent().attr('id'));
//remove the .current class for this LI...
$('li#' + start_pos).children().attr('class', '');
//calculate next LI ID...
var next_pos = (start_pos < total_lis) ? start_pos + 1: 1;
//add .current class to the new LI
$('li#' + next_pos).children().attr('class', 'current');
// monitor the position of current LI, if 3th OR multiple of the total do the magix...
if ((start_pos == 3) || (start_pos % total_lis == 0) || (next_pos == total_lis)) {
$('li#' + next_pos).prevAll().andSelf().attr('class', 'faded').fadeOut(200);
$('li#' + next_pos).nextAll('.faded').andSelf().attr('class', '').fadeIn(200);
}
//Append some stuff recursive...
$('#output li').fadeOut(200,function() {
$(this).html('<img src="http://l.yimg.com/g/images/home_photo_' + images[next_pos] + '.jpg" />' + '<a href="#">See project details</a>').fadeIn(200);
});
}
精彩评论