诸如天猫，京东，当当等购物平台上的通栏大图效果使用的商家越来越多，下面就以图文的方式解说下如何实现这种效果：
1. 条件要求：
可以对模板进行自定义代码编辑即可，当然如果有通栏模板，那就更省事了，这里就不说了。
大部分平台都还是没有通栏模板的。但是只有平台模块中可以自定义编辑代码，只要不屏蔽样式，就可以实现通栏大图效果。
2.原理解析：
通常都是通过在首图层div中添加两个div实现的，第一个div绝对定位，包含带有超链接的通栏图片，第二个div相对定位，定义高度，添加超链接。
也就是，第一个div负责展示通栏大图，但是不占位置，第二个div只是给首图展示占位置的。同样也可以添加超链接。
3.关键代码如下：
<div id="div1" style="margin-left:-960px;1920px;left:50%; position:relative;">
<a href="http://www.cnblogs.com/xyyt" target="_blank">
<img src="http://img01.jpg" height="600" />
</a>
</div>
4.使用方法，只需要使用代码中的div容器，设置相应样式，添加图片和超链接后，通过模块编辑器插入到后台模块即可。
1. div1为通栏层，其样式中须有
margin-left:-960px;1920px; //width是通栏大图的宽度，根据实际情况修改，margin-left的值设置为width值的一半。
left:50%; position:relative; //这两个样式值不用修改
注意：如果平台系统不屏蔽z-index样式，可以添加z-index:9999，将通栏显示在最外层
2. 通栏大图，超链接在div1中实现
3. div2起站位作用，高度设置为图片高度。
5.总结：
一般来说，购物平台页面中多是980px宽居中较多，不论宽度多少，显示器分辨率多大，只要是居中显示，用上面的方法实现的通栏大图，都能最完美的将1920px宽的图片以居中的方式呈现在页面上，只要将图片主体部分居中设计即可，无论用户显示器分辨率多大，只要不超过我们的图片宽度1920,都能将我们的大图居中的展示出来。不必在担心不同的电脑屏幕上看到大图的位置不一样的情况了。