淘宝大图轮播效果实现与解析

<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'tanchudiv'}" data-widget-type="Tabs" style="height:570px;overflow:hidden;">
<div class="tanchudiv" style="height:580px;">
<div class="footer-more-trigger" style="width:1920px;height:580px;top:auto;padding:0px;border:none;left:50%;">
<div class="footer-more-trigger" style="width:1920px;height:580px;padding:0px;border:none;left:-50%;">
<div class="J_TWidget" data-widget-config="{'contentCls': 'taobao-kaidian-com','navCls': 'taobaokaidian-com','effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'prev','nextBtnCls':'next','autoplay': true,'viewSize':[1920],'circular': true,'activeTriggerCls': 'arrow-d'}" data-widget-type="Carousel">
<div class="J_TWidget" data-widget-config="{'trigger':'.kun1920','align':{'node':'.kun1920','offset':[-400,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="prev" style="font-size:100px;cursor:pointer;">
<img src="×󵼺½" /></div>
</div>
<div class="J_TWidget" data-widget-config="{'trigger':'.kun1920','align':{'node':'.kun1920','offset':[400,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="next" style="font-size:100px;cursor:pointer;">
<img src="ÓÒµ¼º½" /></div>
</div>
<div class="kun1920" style="height:580px;width:1920px;overflow:hidden;padding:0px;margin:0px;">
<ul class="taobao-kaidian-com" style="height:580px;width:1920px;padding:0px;margin:0px;">
<li style="width:1920px;height:580px;padding:0px;margin:0px;">
<a href="1²úÆ·Á´½Ó?spm=a1z10.1.w137712-4695585858.7.cFqhmO&amp;id=36930266931" style="padding:0px;margin:0px;" target="_blank"><img border="0px" height="580px" src="1ͼƬÁ´½Ó" width="1920px" /></a></li>
<li style="width:1920px;height:580px;padding:0px;margin:0px;">
<a href="2²úÆ·Á´½Ó?spm=2013.1.0.0.SkllSE&amp;id=36937901826" style="padding:0px;margin:0px;" target="_blank"><img border="0px" height="580px" src="2ͼƬÁ´½Ó" width="1920px" /></a></li>
<li style="width:1920px;height:580px;padding:0px;margin:0px;">
<a href="3²úÆ·Á´½Ó?spm=2013.1.0.0.SkllSE&amp;id=36960364460" style="padding:0px;margin:0px;" target="_blank"><img border="0px" height="580px" src="3ͼƬÁ´½Ó" width="1920px" /></a></li>
</ul>
</div>
<div class="footer-more-trigger" style="padding:0px;border:none;left:50%;display:none;">
<div class="footer-more-trigger" style="width:1920px;height:45px;padding:0px;border:none;left:-960px;top:535px;">
<ul class="taobaokaidian-com" style="width:950px;height:45px;margin:0 auto;text-align:center;border:none;">
<li class="arrow-d" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;">
<img height="36px" src="1ͼƬ" width="119px" /></li>
<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;">
<img height="36px" src="2ͼƬ" width="119px" /></li>