淘宝装修代码:淘宝950图片轮播html源代码

[复制链接]

69

主题

229

帖子

6490

积分

网站编辑

UID
42112
积分
6490
T币
20 枚
金币
13 枚
贡献值
692 点
买家信用
卖家信用
经验值
6314 点
注册时间
2013-3-2
11 7600 taosdk小编 发表于 2013-3-13 16:04:35 | 显示全部楼层
支持你,哈希望多发好帖!

14

主题

16

帖子

1166

积分

TAO-初级会员

Rank: 6

UID
42281
积分
1166
T币
0 枚
金币
8 枚
贡献值
160 点
买家信用
卖家信用
经验值
1134 点
注册时间
2013-3-13
11 7600 淘宝小伙 发表于 2013-3-13 16:04:35 | 显示全部楼层 |阅读模式
点击进行T币充值

做过店铺装修的应该都知道,直接在系统自带的“基础模块”里添加“图片轮播”

即可实现950轮播了。但这个系统自带的“图片轮播”可选参数只有两个:模块高度、

切换效果。

thumb_4c4ce209dc8e67af7da2ceb45bc7ef9d.png
617142534072a724477e07a3639f3230.png

如果我们想让图片轮播的长度和宽度都为300px,显然这个系统自带的图片轮

播就无法做到了。这时,我们需要把系统自带的图片轮播代码提取出来。

以下为淘宝图片轮播源代码:

  1. 1
  2. <div class="slider-promo J_Slider J_TWidget" data-type="scroll" data-widget-type="Slide" style="width:950px;height:500px;" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}">
  3. 2
  4. <ul class="lst-main">
  5. 3
  6. <li><a href="#"><img src="#" style="width:950px;height:500px;" /></a></li>
  7. 4
  8. <li><a href="#"><img src="#" style="width:950px;height:500px;" /></a></li>
  9. 5
  10. <li><a href="#"><img src="#" style="width:950px;height:500px;" /></a></li>
  11. 6
  12. <li><a href="#"><img src="#" style="width:950px;height:500px;" /></a></li>
  13. 7
  14. </ul>
  15. 8
  16. </div>
复制代码

代码解释:

'effect':'scrolly'  向上滚动的轮播,需要渐变效果的轮播只需要把scrolly改为fade

img src="#" 图片地址        a href="#"    图片链接地址

width:950px;  图片宽度      height:500px;  图片高度

注意:img标签里的图片宽度和图片高度是必须设置的,否则轮播将不完整。


店铺装修中,很多地方都可以用到图片轮播,以下为我编写的一个三分栏310px*310px的图片轮播。



源代码如下:

  1. 01
  2. <div style="float:left;margin-bottom:5px;">
  3. 02
  4. <div style="background:#fe8b8e;width:310px;height:28px;line-height:28px;float:left;margin-right:10px;">
  5. 03
  6. <h1 style="font-size:18px;color:#fff;text-indent:8px;">11月新款</h1>
  7. 04
  8. </div>
  9. 05
  10. <div style="background:#fe8b8e;width:310px;height:28px;line-height:28px;float:left;margin-right:10px;">
  11. 06
  12. <h1 style="font-size:18px;color:#fff;text-indent:8px;">10月新款</h1>
  13. 07
  14. </div>
  15. 08
  16. <div style="background:#fe8b8e;width:310px;height:28px;line-height:28px;float:left;">
  17. 09
  18. <h1 style="font-size:18px;color:#fff;text-indent:8px;">9月新款</h1>
  19. 10
  20. </div>
  21. 11
  22. </div>
  23. 12

  24. 13
  25. <div class="slider-promo J_Slider J_TWidget" data-type="scroll" data-widget-type="Slide" style="width:310px;height:310px;float:left;margin-right:10px;" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}">
  26. 14
  27. <ul class="lst-main">
  28. 15
  29. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  30. 16
  31. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  32. 17
  33. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  34. 18
  35. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  36. 19
  37. </ul>
  38. 20
  39. </div>
  40. 21

  41. 22
  42. <div class="slider-promo J_Slider J_TWidget" data-type="scroll" data-widget-type="Slide" style="width:310px;height:310px;float:left;margin-right:10px;" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}">
  43. 23
  44. <ul class="lst-main">
  45. 24
  46. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  47. 25
  48. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  49. 26
  50. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  51. 27
  52. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  53. 28
  54. </ul>
  55. 29
  56. </div>
  57. 30

  58. 31
  59. <div class="slider-promo J_Slider J_TWidget" data-type="scroll" data-widget-type="Slide" style="width:310px;height:310px;float:left;" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}">
  60. 32
  61. <ul class="lst-main">
  62. 33
  63. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  64. 34
  65. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  66. 35
  67. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  68. 36
  69. <li><a href="#"><img src="" style="width:310px;height:310px;" /></a></li>
  70. 37
  71. </ul>
  72. 38
  73. </div>
复制代码

31

主题

655

帖子

3万

积分

TAO-高级会员

Rank: 72Rank: 72

UID
40920
积分
35440
T币
89 枚
金币
20 枚
贡献值
10 点
买家信用
卖家信用
经验值
34746 点
注册时间
2012-11-20
11 7600 guugle 发表于 2013-3-29 23:34:17 | 显示全部楼层
          bucuo

6

主题

132

帖子

1632

积分

TAO-中级会员

Rank: 36

UID
28988
积分
1632
T币
0 枚
金币
0 枚
贡献值
971 点
买家信用
卖家信用
经验值
1474 点
注册时间
2012-8-16
11 7600 风纷飞ξ 发表于 2013-4-8 09:21:55 | 显示全部楼层
谢谢分享,挺有用的
leike 该用户已被删除
11 7600 leike 发表于 2013-5-17 07:28:36 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

4

主题

262

帖子

1万

积分

TAO-高级会员

Rank: 72Rank: 72

UID
8591
积分
12467
T币
9 枚
金币
145 枚
贡献值
6 点
买家信用
卖家信用
经验值
12239 点
注册时间
2011-6-13

社区居民

11 7600 fang 发表于 2013-6-13 10:43:49 | 显示全部楼层
ktyukiriruierur

0

主题

6

帖子

47

积分

TAO-新人

Rank: 1

UID
45125
积分
47
T币
0 枚
金币
0 枚
贡献值
13 点
买家信用
卖家信用
经验值
39 点
注册时间
2013-6-18
11 7600 suna 发表于 2013-6-18 21:30:13 | 显示全部楼层
{:soso_e101:}为啥我我看不到捏

0

主题

46

帖子

419

积分

TAO-初级会员

Rank: 6

UID
63065
积分
419
T币
0 枚
金币
0 枚
贡献值
183 点
买家信用
卖家信用
经验值
385 点
注册时间
2013-9-26
11 7600 zbb295 发表于 2013-9-26 20:17:48 | 显示全部楼层
右下角没有数字显示的

1

主题

26

帖子

1230

积分

TAO-初级会员

Rank: 6

UID
100376
积分
1230
T币
0 枚
金币
0 枚
贡献值
123 点
买家信用
卖家信用
经验值
1207 点
注册时间
2014-1-28
QQ
11 7600 191143370 发表于 2014-2-7 11:23:03 | 显示全部楼层
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

0

主题

54

帖子

929

积分

TAO-初级会员

Rank: 6

UID
105095
积分
929
T币
0 枚
金币
0 枚
贡献值
25 点
买家信用
卖家信用
经验值
915 点
注册时间
2014-5-23
QQ
11 7600 stevenshi 发表于 2014-5-23 15:26:13 | 显示全部楼层
点击进行T币充值
全力支持真正的共享,感谢
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

返回顶部 返回列表