渐进增强之图片传送带

负责任的jQuery开发者应该在编写自己的程序时，始终坚持渐进增强和平稳退化的理念，做到在JavaScript禁用时，页面仍能够与启用JavaScript时一样准确的呈现，即使没有那么美观。

渐进增强，指的是给所有用户同等的基本使用体验，再根据用户终端的级别给予更高级的用户更为高效轻松的用户体验。

平稳退化，是指给所有用户同等的一个基准，但方向却与渐进增强相反，此方法是剥夺低级用户的一些体验。

设置页面

<div id="featured-books">
    <div class="covers">
        <a href="javascript:void(0);" title="aaaaaa">
            <img src="images/1.jpg" alt="bbbbbb" />
        </a>
        <a href="javascript:void(0);" title="aaaaaa">
            <img src="images/2.jpg" alt="bbbbbb" />
        </a>
        <a href="javascript:void(0);" title="aaaaaa">
            <img src="images/3.jpg" alt="bbbbbb" />
        </a>
        ……
    </div>
</div>

为节省首页的空间，我们希望每次只显示其中3个封面。在没有JavaScript的情况下，可以通过将容器元素的overflow属性设置为scroll，并适当地调整容器的宽度来实现这一点：

img {
    border: none;
}
#featured-books {
    position: relative;
    background-color: #ddd;
    width: 544px;
    height: 142px;
    overflow: scroll;
    margin: 1em auto;
    z-index: 2;
}
#featured-books .covers {
    position: relative;
    width: 1056px;
    z-index: 1;
}
/*浮动能让a成为块盒子*/
#featured-books a {
    float: left;            
    padding: 10px 8px;
    height: 106px;
    outline: none;
}

最外层的元素需要具有比它内部元素更大的z-index属性，以保证在IE中能够隐藏内部元素延伸到容器外部的部分。其次把外部元素的宽度设置为544px，恰好可以容纳3幅图像（160px）、每幅图像8px的外边距以及20px的垂直滚动条。

通过JavaScript修改样式

现在已经完成了在没有JavaScript下可以使用的图像浏览器。接下来，通过JS增强它的用户体验。主要做一下修改：在实现滚动机制时滚动条是多余的；应用float属性的自动图片布局，这个浮动布局会妨碍我们在为图片添加动画效果时使用定位。

// 通过JS修改样式,用于渐进增强
var spacing = 176;

$('#featured-books').css({
    'width': spacing * 3,
    'height': 126,
    'overflow': 'hidden'
}).find('.covers a').css({
    'float': 'none',
    'position': 'absolute',
    'left': 1000
});

var $covers = $('#featured-books .covers a');
$covers
    .first().css('left', 0)
    .next().css('left', spacing)
    .next().css('left', spacing * 2);

由于不在需要为滚动条留出空间，所以把包含元素的宽度设置为恰好容纳3幅图片。

通过把overflow属性修改为hidden，可以消除水平滚动条。

把所有的图像使用绝对定位，并让它们的left坐标为1000px，这样就可以把它们放在不可见区域之外。然后可以根据需要呈现其中3张图片