最近在弄京东商城的店铺，遇到不少问题啊，首先就是那个banner轮播效果了，虽然官方有默认的，但总不能满足自己的需求。自己想写，但官方没有像淘宝那样的一个dom案例集合，根据京东官方的规则进行自己写，折腾了好久终于写出来来了。现在来给大家分享下自已的源码，如有需要的朋友直接复制进店铺里面换下图片就ok了。css样式源码：

<style type="text/css">
.user-jdwrap{width:1920px;overflow:hidden;position:absolute;margin-left:-960px !important; left:50%; height:548px;}
.user-jdwrap a{display:block;}
.user-jdwrap .jdwraphd{width:990px; margin:0 auto; text-align:center;height:348px;
position:absolute; top:200px; margin-left:-485px; left:50%;z-index:2;}
.user-jdwrap .jdwraphd ul{ margin:290px auto 0;}
.user-jdwrap .jdwraphd li{width:8px;height:8px;line-height:8px;display:inline-block;
margin:0 3px;cursor:pointer;border-radius:8px;background:#fff;text-indent:-9999px;}
.user-jdwrap .jdwraphd .on{background:#f00;}
.user-jdwrap .jdwraphd span{display:inline-block; cursor:pointer;
position:absolute; top:0;width:60px; height:60px;}
.user-jdwrap .jdwraphd .jtl{
background:url(http://img11.360buyimg.com/cms/g14/M00/11/05/rBEhVVI6wkMIAAAAAAACQZ6lwxcAADWdgP_-yYAAAJZ454.png) no-repeat;left:0}
.user-jdwrap .jdwraphd .jtr{
background:url(http://img12.360buyimg.com/cms/g14/M09/11/05/rBEhV1I6wkMIAAAAAAACNCtux0IAADWdQP__UEAAAK_716.png) no-repeat;right:0;}
.user-jdwrap .jdwrapbd{width:1920px;height:548px;overflow:hidden; position:absolute; top:0; z-index:1;}
.user-jdwrap .jdwrapbd li{position: absolute;}
.user-jdwrap .jdwrapbd li.on{display:block;}
.user-jdwrap .jdwrapbd li a img{width:1920px; height:548px;}
</style>

html模版内容源码：

在线演示
<div class="fn-clear" instanceid="15775335" module-name="Banner" style="" origin="0">
<div class="j-module" module-function="slide" module-param="{imgArea:'.user-jdwrap',
imgNode:'.user-jdwrap .jdwrapbd ul li',tabArea:'.user-jdwrap .jdwraphd',tabNode:'.user-jdwrap .jdwraphd ul li',
defaultClass:'on',slideDirection:'left',subFunction:'transparentEffect',timer:'2',arrowRight:'.user-jdwrap .jdwraphd .jtr',
arrowLeft:'.user-jdwrap .jdwraphd .jtl',}">
<div class="user-jdwrap">
<div class="jdwrapbd">
<ul>
<li><a href="#" target="_blank">
<img src="http://img12.360buyimg.com/cms/g14/M03/11/04/rBEhV1I6pyMIAAAAAARcWaq3yUAAADWWgPpAJgABFxx132.jpg"
class="" title="1" width="1920" height="548" style=""></a></li>
<li ><a href="#" target="_blank">
<img src="http://img10.360buyimg.com/cms/g15/M0A/0A/1F/rBEhWFI5G3sIAAAAAAM8Jq09I24AADRswHW06sAAzw-859.jpg"
class="" title="2" width="1920" height="548"></a></li>
<li><a href="#" target="_blank">
<img src="http://img13.360buyimg.com/cms/g13/M01/0C/05/rBEhUlI5G08IAAAAAAPQBm75VU0AADRewDIAogAA9Ae265.jpg"
class="" title="3" width="1920" height="548"></a></li>
</ul>
</div>
<div class="jdwraphd">
<span class="jtl"></span>
<span class="jtr"></span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</div>
</div>

注：在此页面是看不到效果的，因为没有京东的环境，为了方便读者浏览效果，已经将京东链接加进去，点击上面的"在线演示";后会看到效果。这个效果有一点不到位，这个不是本人的原因，官方默认的也会有这种情况：就是当轮播到最边缘的图时会出现点击箭头无效，当自动播放后才能有效果，希望官方能够注意到这个问题。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2013-09-26/81.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。