由于开发需要，为了能够在各个设备中都能保持一个不错的效果，而设计师给的slider图片大部分仅中间有图片，而图片的长度都是2500px，二两边基本都是纯色。在手机设备上浏览时你就会发现，如果我们将图片的宽度设置为100%，那么图片就是缩放得非常小，以致于无法看清中间部分的图片。因此，就需要在窗口变化的过程中，让图片的中间部分一直处于浏览器可见范围内。
刚开始我使用了@media来进行实现，也就是说直接设置图片的宽度为固定的，而图片外面有一个容器，此容器宽度为100%，并且将图片超出部分所隐藏。这样一来，那么我就可以通过margin-left属性设置为负值，即可移动图片中心部位到相应的地方。但是这个方法确实不行，因为你得写很多不同px的设备。很麻烦，而且经常有各种bug，难以解决。最终我选择了jQuery。
1、需求分析
首先监听窗口的宽度，当宽度小于多少的时候，我们再去设置margin-left的值。
而margin-left的值又要该如何计算？
因为我们需要当窗口宽度小于我们所设置的图片宽度时才进行执行margin-left，因此，假如你设置了image的宽度为1200px，那么我们需要使用下面的计算方式：
1200-当前窗口的宽度=被窗口隐藏的图片宽度
这个仅仅是得到了呗窗口隐藏的右边部分图片的宽度，我们再将其除以2之后也就是，被窗口隐藏的图片宽度的一半，这就得到了我们该向左边margin多少。最终得到的计算方式应该如下：
margin-left:-(image_width – window_width)/2
image_width图片的宽度，window_width即当前窗口的宽度
由于需要向左边移动，所以margin-left的值应该是负值。
2、代码示例