很多人在问我淘宝基础版可以做成多图全屏轮播吗?像专业版那样的效果?答案是肯定的,可以用代码来突破950区域从而变成专业版的,这是我帮朋友做的案例:http://52meise.taobao.com/   大家看下功能是不是和专业版差不多呢?不仔细看还以为是专业版的,这样可以节约每个月50元了,一年下来也要600元。很值得喔!其中的留言版也很有特色,还有旋转导航,以下是截图:

201507101436541946115382.jpg

下面是基础版全屏轮播代码:

<div class="J_TWidget mypopermqgvkFqb" data-widget-config="{'effect': 'fade','circular': true ,'contentCls':'sj-tmqgvkFqb','navCls':'sj-nmqgvkFqb','autoplay':'true'}" data-widget-type="Tabs" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; height: 600px; overflow: hidden; padding-top: 0px"><div class="sj-tmqgvkFqb"><div class="J_TWidget" data-widget-config="{'contentCls': 'sj-contentmqgvkFqb','navCls': 'sj-nmqgvkFqb','triggerType': 'click','effect': 'fade','steps': 1,'autoplay': true,'circular': true ,'prevBtnCls':'prev1mqgvkFqb','nextBtnCls':'next1mqgvkFqbmqgvkFqb'}" data-widget-type="Carousel"><div class="pa2" style="width:1920px;height:600px;overflow:hidden;position:relative;left:-685px;top:0px;"><ul class="sj-contentmqgvkFqb" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 600px; overflow: hidden; padding-top: 0px"><li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height:600x; padding-top: 0px;"><div class="J_TWidget" data-title="feimayi.taobao.com" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'dm_a'}" data-widget-type="Tabs" style="height:590px;">
    <div class="dm_a" style="height:600px;">
        <div class="footer-more footer-more-trigger" style="width:1920px;height:600px;top:auto;padding:0px;border:none;left:50%;background-color: transparent; ">
            <div class="footer-more footer-more-trigger" style="width:1920px;height:600px;padding:0px;border:none;left:-50%;top:-10px;background-color: transparent; ">
                <div data-widget-config="{'contentCls': 'dmcontent','navCls': 'dms','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'prev','nextBtnCls':'next','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget">
                                        <div class="J_TWidget prev" data-widget-config="{'trigger':'.dm_FQ','align':{'node':'.dm_FQ','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
                        <div class="prev" style="font-size:100px;cursor:pointer;">
                            <img src="http://img04.taobaocdn.com/imgextra/i4/126112166/TB2EaKBaXXXXXXxXXXXXXXXXXXX-126112166.png">
                        </div>
                    </div>
                    <div class="J_TWidget next" data-widget-config="{'trigger':'.dm_FQ','align':{'node':'.dm_FQ','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
                        <div class="next" style="font-size:100px;cursor:pointer;">
                            <img src="http://img02.taobaocdn.com/imgextra/i2/126112166/TB2s_WAaXXXXXXQXXXXXXXXXXXX-126112166.png">
                        </div>
                    </div>
                                        <div style="height:600px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="dm_FQ">
                        <ul class="dmcontent" style="height:600px;width:1920px;padding:0px;margin:0px;">
                                                        <li class="item"><a target="_blank" href="http://feimayi.taobao.com"><img src="https://img.alicdn.com/imgextra/i2/1604414189/TB25CMOiVXXXXbwXXXXXXXXXXXX_!!1604414189.jpg"></a></li>
                                                                    <li class="item"><a target="_blank" href="http://feimayi.taobao.com"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2o9kHiVXXXXc_XXXXXXXXXXXX_!!1604414189.jpg"></a></li>
                                                                    <li class="item"><a target="_blank" href="http://feimayi.taobao.com"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2Rfs0iVXXXXX0XXXXXXXXXXXX_!!1604414189.jpg"></a></li>
                                                                    <li class="item"><a target="_blank" href="http://feimayi.taobao.com"><img src="https://img.alicdn.com/imgextra/i3/1604414189/TB2RSkZiVXXXXXZXXXXXXXXXXXX_!!1604414189.jpg"></a></li>
                                                                    <li class="item"><a target="_blank" href="http://feimayi.taobao.com"><img src="http://img01.taobaocdn.com/imgextra/i1/796978238/TB2pzSubXXXXXXtXpXXXXXXXXXX-796978238.jpg"></a></li>
                                                            </ul>
                    </div>
                    <div class="footer-more footer-more-trigger" style="padding:0px;border:none;left:50%;top: 0;background-color: transparent; display:block;">
                                                <div class="footer-more footer-more-trigger" style="background-color: transparent; z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:-960px;top:560px;">
                            <ul class="dms" style="width:950px;height:45px;margin:0 auto;text-align: center;border:none;">
                                                                    <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i2/1604414189/TB25CMOiVXXXXbwXXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>
                                                                            <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2o9kHiVXXXXc_XXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>
                                                                            <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2Rfs0iVXXXXX0XXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>
                                                                            <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i3/1604414189/TB2RSkZiVXXXXXZXXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>
                                                                            <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="http://img01.taobaocdn.com/imgextra/i1/796978238/TB2pzSubXXXXXXtXpXXXXXXXXXX-796978238.jpg" width="153px" height="36px"></li>
                                                                    </ul>
                        </div>
                        <div class="footer-more footer-more-trigger" style="background-color: transparent; z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:-960px;top:560px;">
                            <ul class="dmb" style="width:950px;height:45px;margin:0 auto;text-align: center;border:none;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;opacity: 0.7; background: none;">
                                                                    <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i2/1604414189/TB25CMOiVXXXXbwXXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>
                                                                            <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2o9kHiVXXXXc_XXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>
                                                                            <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i1/1604414189/TB2Rfs0iVXXXXX0XXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>
                                                                            <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="https://img.alicdn.com/imgextra/i3/1604414189/TB2RSkZiVXXXXXZXXXXXXXXXXXX_!!1604414189.jpg" width="153px" height="36px"></li>
                                                                            <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;"><img src="http://img01.taobaocdn.com/imgextra/i1/796978238/TB2pzSubXXXXXXtXpXXXXXXXXXX-796978238.jpg" width="153px" height="36px"></li>
                                                                    </ul>
                        </div>
                                                  </div>
                </div>
            </div>
        </div>
    </div>
    <ul class="ks-switchable-nav" style="display:none;"></ul>
</div></li></ul></div><div style="width: 1920px; display: none; height: 0px; overflow: hidden"><ul class="sj-tmqgvkFqb" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 50px; padding-top: 0px"><li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 315px; padding-right: 0px; background: black; float: left; height: 600px; padding-top: 0px"></li><li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 315px; padding-right: 0px; background: #f8c; float: left; height: 600px; padding-top: 0px"></li><li style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 315px; padding-right: 0px; background: #f1c; float: left; height: 600px; padding-top: 0px"></li></ul></div><ul class="sj-nmqgvkFqb" style="display: none;"><li>1</li></ul></div></div></div>

 使用方法:

在淘宝装修页面新建一个右侧750自定义区,在代码模式下把上面的代码复制进去,然后发布就可以了,当然要把代码简单的改一个图片地址和连接

(将上面的代码复制到记事本中,查找一下图片地址,进行替换你需要使用的图片地址,注意替换图片大小为:1920*600px

各位如果 要定制也可以联系我们,联系本网站站长就可以了,淘宝店铺装修 其实并没有想像中的那么难,就是成人类目的比较麻烦而已(淘宝规定成人类目所有图片都要审核之后 才能使用),其它的类目装修起来还是很快的,有一个却点 那就是要懂一点基础的代码,要不然 在后台 没法改喔 !声明:上面的代码演示效果 要在淘宝店铺装修页面里面才有效果

代码也可下载 地址为

文件下载
资源名称:淘宝基础版全屏多图轮播代码店铺装修教程文件大小:16KB



飞蚂蚁模板网版权9