jQuery实现左右切换焦点图

2020-05-16 18:44:21易采站长站整理

});
}

function headerTabs()
{
var $tabset = $('.heading-tabset')

$tabset.find('.listing:gt(0)').hide();
$tabset.find('.controls:gt(0)').hide();
$tabset.find('.heading-tab li').eq(0).addClass('active');

$(document).delegate('.heading-tab a', 'click', function(event)
{
event.preventDefault();

$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');

var index = $(this).parent().prevAll('*').size();

$(this).parents('.heading-tabset').find('.listing').hide();
$(this).parents('.heading-tabset').find('.listing').eq(index).show();

$(this).parents('.heading-tabset').find('.controls').hide();
$(this).parents('.heading-tabset').find('.controls').eq(index).show();
});
}

function carousel()
{
$(document).delegate('.carousel .next, .carousel .previous', 'click', function(event)
{
// prevent the default anchor action
event.preventDefault();

// get the current carousel
var $carousel = $(this).parents('.carousel');

// check if we're already in the middle of a movement
if ($carousel.prop('moving'))
{
return true;
}

// if we actually clicked it, then stop any running timers
if (event.clientX)
{
stop($carousel);
}

// localize the index, so we know where we are
var index = $carousel.prop('index');

// determine if we're going forward or backward
var movingForward = $(this).hasClass('next');

// grab all the slides
var $slides = $carousel.find('.carousel-item');

// grab the currently focused slide
var $focus = $slides.eq(index);

// figure out where're we going from here
var nextObject = movingForward ? nextSlide($carousel, index) : previousSlide($carousel, index);

// locaalize the next div to be shown
var $next = nextObject.element;

// localize the index of the next element to be shown
var newIndex = nextObject.index;

// determine where we should place the next element so it slides from the correct side
var initialLeft = movingForward ? $(document.body).outerWidth() : -$next.outerWidth();

// save the current zero position, everything will move to/from here
var zeroPosition = $focus.offset().left;

// determine where the focus is moving to
var targetLeft = zeroPosition + (movingForward ? -$next.outerWidth() : $next.outerWidth());

// we're comitted to moving now so set the flag to true so we don't duplicate animations
$carousel.prop('moving', true);

// reset all z-indexes to 1
$slides.css('z-index', 1);

// make the currently focused slide higher than all the rest
$focus.css('z-index', 2);

// setup the current slide so it can animate out
$focus.css({