本文由php中文網提供，介紹淘寶網店輪播圖片html代碼整理及局部調整。
1.主程式碼
<p class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:545px;overflow:hidden;">
<p class="taobaoux" style="height:550px;">
<p class="footer-more-trigger" style="width:1920px;height:550px;top:auto;padding:0px;border:none;left:50%;">
<p class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">
<p data-widget-config="{'contentCls': 'taobaoux-com','navCls': 'bbs-taobaoux-com','effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'prev1920','nextBtnCls':'next1920','autoplay': true,'viewSize':[1920],'circular': true}" data-widget-type="Carousel" class="J_TWidget">
<p class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<p class="prev1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;"><</p>
</p>
<p class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<p class="next1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;">></p>
</p>
<p style="height:550px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="ux1920">
<ul class="taobaoux-com" style="height:550px;width:1920px;padding:0px;margin:0px;">
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920.jpg" width="1920px" height="550px" border="0px"></a></li>
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="1920px" height="550px" border="0px"></a></li>
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="1920px" height="550px" border="0px"></a></li>
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="1920px" height="550px" border="0px"></a></li>
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="1920px" height="550px" border="0px"></a></li>
</ul>
</p>
<p class="footer-more-trigger" style="padding:0px;border:none;left:50%;">
<p class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:505px;">
<ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align: center;">
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
</ul>
</p>
</p>
</p>
</p>
</p>
</p>
<ul class="ks-switchable-nav" style="display:none;"></ul>
</p>
#1.修改左箭頭
<p class="prev1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;"><</p> <p class="prev1920" style="width:97px;height:97px;"><img src="左箭头图片地址" /> </p>
2.修改右箭頭：
<p class="next1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;">></p>
改為：
<p class="next1920" style="width:97px;height:97px;"> <img src="右箭头图片地址" /></p>
3.箭頭都放在左邊：
<
修改為：
<p class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<p class="prev1920" style="width:97px;height:97px;margin-left: 97px;">
<img src="左箭头图片地址" /></p>
<p class="next1920" style="width:97px;height:97px;">
<img src="右箭头图片地址" /></p>
</p>4.下方的縮圖改為數字：
<p class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:505px;">
<ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align: center;">
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
</ul>
</p>改為：
<p class="footer-more-trigger" style="width:1920px;height:30px;padding:0px;border:none;left:-960px;background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:525px;">
<ul class="bbs-taobaoux-com" style="width:950px;height:30px;margin:0 auto;text-align: center;">
<li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">1</li>
<li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">2</li>
<li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">3</li>
<li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">4</li>
<li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">5</li>
</ul>
</p>5.不喜歡底部半透明圖片：
<p class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:505px;">
刪除：
background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;
#6.修改滾動動畫效果：
找到'effect': 'scrollx ' 把scrollx改為scrolly就是垂直滾動，改為fade就是淡隱淡現。
7.修改滾動動畫速度：
在'effect': 'scrollx',後面加入一個屬性'duration':0.5,
預設值就是0.5，如果需要加快滾動速度，把0.5改為0.1；要滾動速度慢一點，就把0.5加大，建議改為0.9以內。
文章網址：http://www.php.cn/div-tutorial-377487.html
學習程式設計就來PHP中文網 www.php.cn
以上是淘寶網店輪播圖片html代碼整理及局部調整的詳細內容。更多資訊請關注PHP中文網其他相關文章！
