当前位置:首页 > 知识 > 设计 > 正文内容

淘宝店铺装修之专业版全屏轮播

innov10年前 (2015-10-08)设计7390

想必在使用淘宝店铺专业版的同学都在为首页全屏图片轮播烦恼吧!其实只需一段代码的问题就能完全解决。

第一步:登陆淘宝旺铺专业版账号,进入店铺装修后台。

 

第二步:在950自定义模块下,添加模块。

 

第三步:新建一个自定义模块。

1.jpg

第四步:缩略图全屏轮播的代码如下:

<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'kmcomic'}" data-widget-type="Tabs" style="height:490px;overflow:hidden;" data-title="本代码由Timo的博客编辑整理">
    <div class="kmcomic" style="height:500px;">
      <div class="footer-more-trigger" style="width:1920px;height:500px;top:auto;padding:0px;border:none;left:50%;">
        <div class="footer-more-trigger" style="width:1920px;height:500px;padding:0px;border:none;left:-960px;">
          <div class="J_TWidget" data-widget-config="{'contentCls': 'kmcomiccontent','navCls': 'kmcomictriggers','effect': 'scrollx','easing': 'elasticOut','prevBtnCls':'prev','nextBtnCls':'next','autoplay': true,'viewSize':[1920],'circular': true}" data-widget-type="Carousel">
            <div class="J_TWidget" data-widget-config="{'trigger':'.qplb','align':{'node':'.qplb','offset':[0,-20],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
              <div class="prev" style="float:left;font-size:100px;cursor:default;opacity:0.5;color:#F00;">
                <span>
                  <img border="0" height="52" src="https://img.alicdn.com/imgextra/i1/414450752/TB26oe9fVXXXXauXpXXXXXXXXXX_!!414450752.png" width="52" />
                </span>
              </div>
              <div class="next" style="margin-left:950px;font-size:100px;cursor:default;opacity:0.5;color:#F00;">
                <span>
                  <img border="0" height="52" src="https://img.alicdn.com/imgextra/i2/414450752/TB2cnq5fVXXXXbdXpXXXXXXXXXX_!!414450752.png" width="52" />
                </span>
              </div>
            </div>
            <div class="qplb" style="height:500px;width:1920px;overflow:hidden;padding:0px;margin:0px;">
              <ul class="kmcomiccontent" style="height:500px;width:1920px;padding:0px;margin:0px;">
                <li style="width:1920px;height:500px;padding:0px;margin:0px;">
                  <span>
                    <a style="padding:0px;margin:0px;" a href="链接1" target="_blank">
                      <img border="0px" height="500" src="图片1" width="1920" />
                    </a>
                  </span>
                </li>
             
                <li style="width:1920px;height:500px;padding:0px;margin:0px;">
                  <span>
                    <a style="padding:0px;margin:0px;" a href="链接2" target="_blank">
                      <img border="0px" height="500" src="图片2" width="1920" />
                    </a>
                  </span>
                </li>
              </ul>
            </div>
            <div class="footer-more-trigger" style="padding:0px;border:none;left:50%;">
              <div class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background:url(http://img01.taobaocdn.com/imgextra/i1/1015393481/T2mwjGXApXXXXXXXXX-1015393481.png) repeat;top:453px;">
                <ul class="kmcomictriggers" style="width:950px;height:50px;margin:0 auto;text-align:center;">
                  <li style="display:inline;margin:0 5px;cursor:pointer;line-height:50px;">
                    <span>
                      <img border="0px" height="39px" src="图片1" style="vertical-align:middle;margin:5px 0;" width="120px" />
                    </span>
                  </li>
                  <li style="display:inline;margin:0 5px;cursor:pointer;line-height:50px;">
                    <span>
                      <img border="0px" height="39px" src="图片2" style="vertical-align:middle;margin:5px 0;" width="120px" />
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul class="ks-switchable-nav" style="display:none;"></ul>
  </div>

如需增加更多图片,只要将上面的蓝色字体部分增加就行,红色字体的请修改为您图片的地址。

第五步:将上述代码复制到记事本中,修改代码中的图片和链接地址。
将图片1、图片2分别改成淘宝图片空间中1920x500px尺寸的海报图片地址。
将链接1、链接2分别改成点击图片后进入的页面地址。

 

第六步:复制修改好的代码,粘贴到店铺的自定义内容区。

QQ截图20151008140037.jpg

第七步:点击发布。

扫描二维码推送至手机访问。

版权声明:本文由知新日笺发布,如需转载请注明出处。

本文链接:https://innovdn.cn/post/39.html

标签: 淘宝装修
分享给朋友:
返回列表

没有更早的文章了...

下一篇:淘宝店铺装修之专业版固定页面背景

“淘宝店铺装修之专业版全屏轮播” 的相关文章

三折页尺寸、画册尺寸

三折页尺寸、画册尺寸

●宣传彩页(三折页) 成品尺寸:210×95mm 展开尺寸:210×285mm 工艺:157g铜版纸,4C+4C印刷,切成品、折页。●宣传彩页、单页(16开小海报) 成品尺寸:210×285mm 工艺:多采用157克铜版纸4C+4C印刷,(可印专色、专金、专银)切成品。●四开、对开宣传大海报 成品尺...

淘宝全屏图片代码 全屏海报代码

淘宝全屏图片代码 全屏海报代码

经过一翻网络搜索,小编今天分享一个无需轮播代码方式实现的,用一张图片实现的全屏图片代码淘宝全屏海报代码。该代码非常实用,小编经过测试,用起来非常不错。现在我们就可以用一张单图轻松实现全屏海报图片效果啦。彻底抛弃页面背景实现全屏海报、轮播图片代码实现全屏效果的笨办法了。(一)一张图片的全屏图片代码(淘...

如何将产品图片PS成线稿图

如何将产品图片PS成线稿图

ps将图片变线稿1、进入ps软件中,将需要变成线稿的图片导入ps中。2、导入之后,在键盘上按下快捷键ctrl+shift+u将图片去色。3、将图片去色之后,再按“ctrl+i”将图片变成反相。4、在右侧的属性图层选项中,将这张图片设置为“颜色减淡”。5、点击上方任务栏的“滤镜”,再点击“其它,选择最...

十六种抠图技巧

十六种抠图技巧

十六种抠图技巧:1、选框抠图按SHIFT键正方形绘制选区,按ALT键中心绘制选区,按SHIFT+ALT键中心等比绘制选区。按SHIFT加选,按ALT减选,按SHIFT+ALT交叉选取,按SHIFT+F6羽化,按空格SPACE移动选区。选区可以按右键进行变换,修改选区进入选择-修改(边界、平滑、扩展、...

淘宝发布产品要求

淘宝发布产品要求

电脑端描述(PC端)淘宝宝贝描述的图文要求如下:1、图片宽度≤750px,图片高度未限制(不建议太长,容易导致消费者打开页面卡顿)2、图片大小≤3mb,支持jpg、jpeg、png格式3、文字字数≤25000字4、源代码≤200000字符温馨提示:不要复制他人图片或是他人图片源代码编辑,务必在编辑页...

AI学习笔记 第二章 Adobe illustrator2020工具入门

AI学习笔记 第二章 Adobe illustrator2020工具入门

AI中常用快捷键汇总快捷键实现功能快捷键实现功能快捷键实现功能CTRL+K打开首选项CTRL+R显示标尺CTRL+F贴在前面CTRL+Z还原操作ALT+CTRL+R画板标尺CTRL+B贴在后面SHIFT+CTRL+Z重做CTRL+G编组(右键可取消编组)CTRL+]前移一层SHIFT+CTRL+V就...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。