淘宝店铺动态轮播代码实现与教程

<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'bslide_27vI3'}" data-widget-type="Tabs">
<div class="bslide_27vI3" style="height: 410px;">
<div class="J_TWidget" data-widget-config="{'navCls':'scroller-nav','contentCls':'scroller-content','steps':1,'prevBtnCls': 'prev','nextBtnCls': 'next','disableBtnCls': 'disable',&#10;&#13;&#10;&#13;&#10;&#13;'circular':true,&#10;&#13;&#10;&#13;&#10;&#13;'effect':'scrollx',&#10;&#13;&#10;&#13;&#10;&#13;'easing':'easeOut',&#10;&#13;&#10;&#13;&#10;&#13;'duration':1.0,&#10;&#13;&#10;&#13;&#10;&#13;'interval':'4',&#10;&#13;&#10;&#13;&#10;&#13;'autoplay':true}" data-widget-type="Carousel" style="left: -485px; top: 0px; width: 1920px; height: 370px;">
<div class="J_TWidget" data-widget-config="{'trigger':'.bslide_27vI3','align':{'node':'.bslide_27vI3','offset':[0,0],'points':['cc','cc']}}" data-widget-type="Popup" style="width: 950px; display: none; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); opacity: 0.5;">
<span class="prev J_TWidget" style="background: url(&quot;http://img03.taobaocdn.com/bao/uploaded/i3/T1MDnDXdliXXartXjX.gif&quot;) no-repeat; width: 59px; height: 59px; float: left; display: block; cursor: pointer;"></span> <span class="next J_TWidget" style="background: url(&quot;http://img03.taobaocdn.com/bao/uploaded/i3/T1MDnDXdliXXartXjX.gif&quot;) no-repeat right 0px; width: 59px; height: 59px; float: right; display: block; cursor: pointer;"></span></div>
<div class="scroller" style="width: 1920px; height: 400px; overflow: hidden;">
<ul class="scroller-content">
<li style="background: rgb(255, 255, 255); margin: 0px; border: currentColor; width: 1920px; height: 400px; overflow: hidden;">
<a href="http://fireflyonline.taobao.com/?&amp;&amp;scene=taobao_shop" style="background: url(&quot;http://img04.taobaocdn.com/imgextra/i4/1770738564/T2zBiiXntcXXXXXXXX_!!1770738564.jpg&quot;) no-repeat center 0px; width: 1920px; height: 400px; display: block; cursor: pointer;" target="_blank"></a></li>
<li style="background: rgb(255, 255, 255); margin: 0px; border: currentColor; width: 1920px; height: 400px; overflow: hidden;">
<a href="http://fireflyonline.taobao.com/?&amp;&amp;scene=taobao_shop" style="background: url(&quot;http://img04.taobaocdn.com/imgextra/i4/1770738564/T2zBiiXntcXXXXXXXX_!!1770738564.jpg&quot;) no-repeat center 0px; width: 1920px; height: 400px; display: block; cursor: pointer;" target="_blank"></a></li>
<li style="background: rgb(255, 255, 255); margin: 0px; border: currentColor; width: 1920px; height: 400px; overflow: hidden;">
<a href="http://fireflyonline.taobao.com/?&amp;&amp;scene=taobao_shop" style="background: url(&quot;http://img04.taobaocdn.com/imgextra/i4/1770738564/T2zBiiXntcXXXXXXXX_!!1770738564.jpg&quot;) no-repeat center 0px; width: 1920px; height: 400px; display: block; cursor: pointer;" target="_blank"></a></li>
</ul>
</div>
<ul class="scroller-nav" style="width: 1920px; color: rgb(0, 0, 0); font-family: tahoma; font-size: 20px; margin-left: 930px;">
<li style="width: 20px; height: 20px; text-align: center; line-height: 20px; display: inline-block; cursor: pointer;">
¡ñ</li>
<li style="width: 20px; height: 20px; text-align: center; line-height: 20px; display: inline-block; cursor: pointer;">
¡ñ</li>
<li style="width: 20px; height: 20px; text-align: center; line-height: 20px; display: inline-block; cursor: pointer;">
¡ñ</li>
</ul>
</div>
</div>
<ul class="ks-switchable-nav" style="display: none;">
<li class="ks-active">
1</li>
</ul>
</div>