Jquery改变图像宽度在水平旋转木马

Question

我正在尝试将图像轮播更改为其中一张图像宽度为500px，其余图像宽度为100px，示例如下:

http://jsfiddle.net/Uu3aP/3/

只有位于div中间的图像，无论是否滑动，应该有500px。图像应该改变，因为它是在中间的div中心。例如，如果你给列表id 1/7，中间的一个改变大小，如果它是id 1或其他

$(document).ready(function() {
var EASING = 0.05,
    FPS = 60,
    $paneTarget = $('#scroll'),
    $paneContainer = $('#scrollContainer'),
    windowWidth = $(window).width(),
    containerWidth = 0,
    maxScroll = 0,
    posX = 0,   // Keep track of the container position with posX
    targetX = 0,
    animInterval = false;   // No interval is set by default
$paneTarget.find('li').each(function() {
    containerWidth += $(this).width();
    $paneContainer.width(containerWidth);
});
// Set maximum amount the container can scroll
// negative because we're gonna scroll to left
maxScroll = -(containerWidth - windowWidth);
// This gets called from the setInterval and handles the animating of the scroll container
function animationLoop() {
    var dx = targetX - posX,    // Difference
        vx = dx * EASING;       // Velocity
    // Add velocity to x position and update css with new position
    posX += vx;
    $paneContainer.css({left: posX});
    // When end target is reached stop the interval
    if (Math.round(posX) === targetX) {
        clearInterval(animInterval);
        animInterval = false;
    }
}
$paneTarget.on('mousemove', function(event) {
    // Calculate the new x position for the scroll container
    targetX = Math.round((event.pageX / windowWidth) * maxScroll);
    // Only start animation interval when it's not already running
    if (!animInterval) {
        animInterval = setInterval(animationLoop, 1000 / FPS);
    }
});

});

Answer 1

将class添加到您的<li>节点之一并更改该类的宽度

额外HTML

<li class="special"><img  src="http://www.luxuryselfcatering.uk.com/wp-content/uploads/2013/04/placeholder-1-500x350.jpg" alt="" /></li>

额外CSS

#scrollContainer li.special {
    width: 500px;
}

这是http://jsfiddle.net/Uu3aP/14/