淘宝店铺上的图片轮播怎么设置

发布网友发布时间：2022-04-28 21:18

共2个回答

懂视网时间：2022-04-20 16:43

本文由Gxl网提供，介绍淘宝网店轮播图片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="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="左箭头图片地址" /></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.gxlcms.com/div-tutorial-377487.html

学编程就来PHP中文网 www.gxlcms.com

热心网友时间：2022-04-20 13:51

图片轮播是淘宝网标准版店铺才有的功能，如果亲能够找到可以图片轮播的代码，将代码黏贴放在自定义内容区，一样可以达到图片轮播的效果。今天主要跟大家分享第一种，淘宝网标准版以上的（包括标准版）店铺:如何设置图片轮播

工具/原料
淘宝旺铺（标准版以上）
轮播图片（至少准备两张图片，宽度固定为750px，高度没要求，所选图片高度要一致）

步骤/方法
1登入淘宝——卖家中心，点击图片空间。
2点击图片上传——通用上传。
3选择分类（要上传到哪个分类下，有助于查看。没有合适的，也可以点击创建分类），点击添加图片
4选择要上传的图片——确定
5点击回到图片管理
6复制图片空间中的图片连接
和店铺首页中的宝贝连接地址（点击这张图片轮播，会跳到哪个宝贝详情页或其他页面）7在桌面新建一个TXT格式的文档，将连接都黏贴其内
8登入卖家中心——店铺装修，在右侧模块点击在此处添加新模块——添加“图片轮播”
9点击编辑
10设置——保存
1.模块标题可以更改，可以显示、也可以不显示。不显示就直接在模块标题处留空白。
2.选择合适的模块高度，找不到合适的，点击下拉框——自定义，输入高度值。
3.切换效果，根据个人要求选择。
4.点击添加，可增添图片数量。将图片地址和连接地址（链接地址就是点击这张图片轮播，会跳到哪个宝贝详情页或其他页面）黏贴到指定区域。

11最后点击发布

注意事项
淘宝网标准版店铺才图片轮播的功能
图片宽度固定为750px，高度虽没*，但一般情况下最好不要超过宽度。图片高度要一样追问谢谢，亲的解答的详细答案我会实际操作的。

追答那请采纳我吧亲