本文由本站提供，介绍淘宝网店轮播图片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" style="max-width:90%" height="550px" border="0px" alt="淘宝网店轮播图片html代码整理及局部调整" ></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" style="max-width:90%" height="550px" border="0px" alt="淘宝网店轮播图片html代码整理及局部调整" ></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" style="max-width:90%" height="550px" border="0px" alt="淘宝网店轮播图片html代码整理及局部调整" ></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" style="max-width:90%" height="550px" border="0px" alt="淘宝网店轮播图片html代码整理及局部调整" ></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" style="max-width:90%" height="550px" border="0px" alt="淘宝网店轮播图片html代码整理及局部调整" ></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" style="max-width:90%" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" / alt="淘宝网店轮播图片html代码整理及局部调整" ></li> <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;"> <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" style="max-width:90%" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" / alt="淘宝网店轮播图片html代码整理及局部调整" ></li> <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;"> <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" style="max-width:90%" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" / alt="淘宝网店轮播图片html代码整理及局部调整" ></li> <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;"> <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" style="max-width:90%" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" / alt="淘宝网店轮播图片html代码整理及局部调整" ></li> <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;"> <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" style="max-width:90%" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" / alt="淘宝网店轮播图片html代码整理及局部调整" ></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="左箭头图片地址" / alt="淘宝网店轮播图片html代码整理及局部调整" > </p>
2.修改右箭头：
<p class="next1920" style="max-width:90%">></p>
改为：
立即学习“前端免费学习笔记（深入）”；
<p class="next1920" style="width:97px;height:97px;"> <img src="右箭头图片地址" / alt="淘宝网店轮播图片html代码整理及局部调整" ></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="max-width:90%"> <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 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="左箭头图片地址" / alt="淘宝网店轮播图片html代码整理及局部调整" ></p> <p class="next1920" style="width:97px;height:97px;"> <img src="右箭头图片地址" / alt="淘宝网店轮播图片html代码整理及局部调整" ></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" style="max-width:90%" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" / alt="淘宝网店轮播图片html代码整理及局部调整" ></li> <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;"> <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" style="max-width:90%" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" / alt="淘宝网店轮播图片html代码整理及局部调整" ></li> <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;"> <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" style="max-width:90%" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" / alt="淘宝网店轮播图片html代码整理及局部调整" ></li> <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;"> <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" style="max-width:90%" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" / alt="淘宝网店轮播图片html代码整理及局部调整" ></li> <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;"> <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" style="max-width:90%" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" / alt="淘宝网店轮播图片html代码整理及局部调整" ></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/p-tutorial-377487.html
学编程就来php中文网 www.php.cn
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）