天猫版/专业版/基础版全屏轮播代码1920X600基础版缩略图全屏轮播模板,保证可以用喔!
以下是效果图:
代码使用方法:复制以下代码,然后把代码放进750自定义里面就好了,然后替换成自己图片空间地址,和宝贝连接,怎么替换我就不多说了,自己在代码缋找一下 img和 href.
天猫版代码如下:
<div data-title="" data-title="" style="height:600px;" class="vc2018"> <div data-title="" class="sn-simple-logo" style="width:auto;border:none 0;padding:0;width:1920px;height:600px;border:none;padding:0;top:auto;left:auto;"> <div class="sn-simple-logo" style="width:auto;border:none 0;padding:0;width:1920px;height:600px;left:-465px;top:auto;border:none;padding:0;overflow:hidden;"> <div class="sn-simple-logo" style="width:auto;border:none 0;padding:0;height:600px;width:1920px;top:auto;left:auto;"> <div class="J_TWidget bslide_vc2018_675811" style="overflow:hidden;height:600px;width:1920px;" data-title="" data-widget-config="{"navCls":"hidden-nav","effect": "fade", "circular": true ,"contentCls":"nav_vc2018_675813"}" data-widget-type="Tabs"> <div style="height:600px;left:0;top:0" class="mall-slide J_TWidget" data-widget-config="{"navCls":"scroller-nav","contentCls":"scroller-content","steps":1,"prevBtnCls": "prev","nextBtnCls": "next","disableBtnCls": "disable", "circular":true, "effect":"scrollx", "easing":"easeOutStrong", "duration":0.5, "interval":"5", "autoplay":true}" data-widget-type="Carousel"> <div class="J_TWidget prev" data-widget-type="Popup" data-widget-config="{"trigger":".slide_vc2018_675812","align":{"node":".slide_vc2018_675812","offset":[-495,0],"points":["cc","cc"]}}" style="cursor:pointer;width:60px;height:60px;background:#666 url(https://img.alicdn.com/imgextra/i4/1120870168/TB2cHkhv9FjpuFjSspbXXXagVXa-1120870168.gif) no-repeat center center;display:none;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;border-radius: 3030px;"> </div> <div class="J_TWidget next" data-widget-type="Popup" data-widget-config="{"trigger":".slide_vc2018_675812","align":{"node":".slide_vc2018_675812","offset":[495,0],"points":["cc","cc"]}}" style="cursor:pointer;width:60px;height:60px;background:#666 url(https://img.alicdn.com/imgextra/i2/1120870168/TB2TtSDAtFopuFjSZFHXXbSlXXa-1120870168.gif) no-repeat center center;display:none;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;border-radius: 3030px;"> </div> <div class="scroller slide_vc2018_675812" style="width:1920px; height:600px; overflow:hidden"> <ul class="scroller-content"> <li> <a href="http://feimayi.taobao.com" target="_blank" style="display:block; cursor:pointer;width:1920px;height:600px;background:url(https://img.alicdn.com/imgextra/i4/1120870168/TB2agcnvYFkpuFjy1XcXXclapXa-1120870168.jpg) no-repeat center 0;"></a> </li> <li> <a href="http://feimayi.taobao.com" target="_blank" style="display:block; cursor:pointer;width:1920px;height:600px;background:url(https://img.alicdn.com/imgextra/i4/1120870168/TB2agcnvYFkpuFjy1XcXXclapXa-1120870168.jpg) no-repeat center 0;"></a> </li> <li> <a href="http://feimayi.taobao.com" target="_blank" style="display:block; cursor:pointer;width:1920px;height:600px;background:url(https://img.alicdn.com/imgextra/i4/1120870168/TB2agcnvYFkpuFjy1XcXXclapXa-1120870168.jpg) no-repeat center 0;"></a> </li> </ul> </div> <div class="nav_vc2018_675813"> <ul class="J_TWidget scroller-nav" style="margin-top:6px;bottom:10px;width:1920px; overflow:hidden;text-align:center;left:0;font-family:Tahoma;height:10px;color:#666;" data-widget-type="Compatible" data-widget-config="{"png":true,"png_bg":true}"> <li style=" width:20px;height:10px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;margin:0 5px;background:#666"> </li> <li style=" width:20px;height:10px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;margin:0 5px;background:#666"> </li> <li style=" width:20px;height:10px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;margin:0 5px;background:#666"> </li> </ul> </div> <ul class="hidden-nav" style="width:0;height:0;line-height:0;display:none"> <li> 1 </li> </ul> </div> </div> </div> </div> </div>
专业版代码如下:
<div data-title="" class="vc2018" data-title="" style="height:600px;"> <div data-title="" class="footer-more-trigger" style="left:auto;right:auto;width:950px;height:600px;top:auto;padding:0;border:none;z-index:1;background:none;"> <div class="footer-more-trigger" style="left:-485px;top:0px;height:600px;width:1920px;border:none;padding:0;background:none;"> <div class="J_TWidget bslide_vc2018_679941" style="overflow:hidden;height:600px;width:1920px;" data-title="" data-widget-config="{"navCls":"hidden-nav","effect": "fade", "circular": true ,"contentCls":"nav_vc2018_679943"}" data-widget-type="Tabs"> <div style="height:600px;left:0;top:0" class="mall-slide J_TWidget" data-widget-config="{"navCls":"scroller-nav","contentCls":"scroller-content","steps":1,"prevBtnCls": "prev","nextBtnCls": "next","disableBtnCls": "disable", "circular":true, "effect":"scrollx", "easing":"easeOutStrong", "duration":0.5, "interval":"5", "autoplay":true}" data-widget-type="Carousel"> <div class="J_TWidget prev" data-widget-type="Popup" data-widget-config="{"trigger":".slide_vc2018_679942","align":{"node":".slide_vc2018_679942","offset":[-495,0],"points":["cc","cc"]}}" style="cursor:pointer;width:60px;height:60px;background:#666 url(https://img.alicdn.com/imgextra/i4/1120870168/TB2cHkhv9FjpuFjSspbXXXagVXa-1120870168.gif) no-repeat center center;display:none;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;border-radius: 3030px;"> </div> <div class="J_TWidget next" data-widget-type="Popup" data-widget-config="{"trigger":".slide_vc2018_679942","align":{"node":".slide_vc2018_679942","offset":[495,0],"points":["cc","cc"]}}" style="cursor:pointer;width:60px;height:60px;background:#666 url(https://img.alicdn.com/imgextra/i2/1120870168/TB2TtSDAtFopuFjSZFHXXbSlXXa-1120870168.gif) no-repeat center center;display:none;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;border-radius: 3030px;"> </div> <div class="scroller slide_vc2018_679942" style="width:1920px; height:600px; overflow:hidden"> <ul class="scroller-content"> <li> <a href="http://feimayi.taobao.com" target="_blank" style="display:block; cursor:pointer;width:1920px;height:600px;background:url(https://img.alicdn.com/imgextra/i4/1120870168/TB2agcnvYFkpuFjy1XcXXclapXa-1120870168.jpg) no-repeat center 0;"></a> </li> <li> <a href="http://feimayi.taobao.com" target="_blank" style="display:block; cursor:pointer;width:1920px;height:600px;background:url(https://img.alicdn.com/imgextra/i4/1120870168/TB2agcnvYFkpuFjy1XcXXclapXa-1120870168.jpg) no-repeat center 0;"></a> </li> <li> <a href="http://feimayi.taobao.com" target="_blank" style="display:block; cursor:pointer;width:1920px;height:600px;background:url(https://img.alicdn.com/imgextra/i4/1120870168/TB2agcnvYFkpuFjy1XcXXclapXa-1120870168.jpg) no-repeat center 0;"></a> </li> </ul> </div> <div class="nav_vc2018_679943"> <ul class="J_TWidget scroller-nav" style="margin-top:6px;bottom:10px;width:1920px; overflow:hidden;text-align:center;left:0;font-family:Tahoma;height:10px;color:#666;" data-widget-type="Compatible" data-widget-config="{"png":true,"png_bg":true}"> <li style=" width:20px;height:10px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;margin:0 5px;background:#666"> </li> <li style=" width:20px;height:10px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;margin:0 5px;background:#666"> </li> <li style=" width:20px;height:10px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;margin:0 5px;background:#666"> </li> </ul> </div> <ul class="hidden-nav" style="width:0;height:0;line-height:0;display:none"> <li> 1 </li> </ul> </div> </div> </div> </div>
基础版代码如下:
<div data-title="" class="vc2018" data-title="" style="height:600px;"> <div data-title="" class="footer-more-trigger" style="left:auto;right:auto;width:950px;height:600px;top:auto;padding:0;border:none;z-index:1;background:none;"> <div class="footer-more-trigger" style="left:-485px;top:0px;height:600px;width:1920px;border:none;padding:0;background:none;"> <div class="J_TWidget bslide_vc2018_680551" style="overflow:hidden;height:600px;width:1920px;" data-title="" data-widget-config="{"navCls":"hidden-nav","effect": "fade", "circular": true ,"contentCls":"nav_vc2018_680553"}" data-widget-type="Tabs"> <div style="height:600px;left:0;top:0" class="mall-slide J_TWidget" data-widget-config="{"navCls":"scroller-nav","contentCls":"scroller-content","steps":1,"prevBtnCls": "prev","nextBtnCls": "next","disableBtnCls": "disable", "circular":true, "effect":"scrollx", "easing":"easeOutStrong", "duration":0.5, "interval":"5", "autoplay":true}" data-widget-type="Carousel"> <div class="J_TWidget prev" data-widget-type="Popup" data-widget-config="{"trigger":".slide_vc2018_680552","align":{"node":".slide_vc2018_680552","offset":[-495,0],"points":["cc","cc"]}}" style="cursor:pointer;width:60px;height:60px;background:#666 url(https://img.alicdn.com/imgextra/i4/1120870168/TB2cHkhv9FjpuFjSspbXXXagVXa-1120870168.gif) no-repeat center center;display:none;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;border-radius: 3030px;"> </div> <div class="J_TWidget next" data-widget-type="Popup" data-widget-config="{"trigger":".slide_vc2018_680552","align":{"node":".slide_vc2018_680552","offset":[495,0],"points":["cc","cc"]}}" style="cursor:pointer;width:60px;height:60px;background:#666 url(https://img.alicdn.com/imgextra/i2/1120870168/TB2TtSDAtFopuFjSZFHXXbSlXXa-1120870168.gif) no-repeat center center;display:none;*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);opacity:0.6;border-radius: 3030px;"> </div> <div class="scroller slide_vc2018_680552" style="width:1920px; height:600px; overflow:hidden"> <ul class="scroller-content"> <li> <a href="http://feimayi.taobao.com" target="_blank" style="display:block; cursor:pointer;width:1920px;height:600px;background:url(https://img.alicdn.com/imgextra/i4/1120870168/TB2agcnvYFkpuFjy1XcXXclapXa-1120870168.jpg) no-repeat center 0;"></a> </li> <li> <a href="http://feimayi.taobao.com" target="_blank" style="display:block; cursor:pointer;width:1920px;height:600px;background:url(https://img.alicdn.com/imgextra/i4/1120870168/TB2agcnvYFkpuFjy1XcXXclapXa-1120870168.jpg) no-repeat center 0;"></a> </li> <li> <a href="http://feimayi.taobao.com" target="_blank" style="display:block; cursor:pointer;width:1920px;height:600px;background:url(https://img.alicdn.com/imgextra/i4/1120870168/TB2agcnvYFkpuFjy1XcXXclapXa-1120870168.jpg) no-repeat center 0;"></a> </li> </ul> </div> <div class="nav_vc2018_680553"> <ul class="J_TWidget scroller-nav" style="margin-top:6px;bottom:10px;width:1920px; overflow:hidden;text-align:center;left:0;font-family:Tahoma;height:10px;color:#666;" data-widget-type="Compatible" data-widget-config="{"png":true,"png_bg":true}"> <li style=" width:20px;height:10px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;margin:0 5px;background:#666"> </li> <li style=" width:20px;height:10px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;margin:0 5px;background:#666"> </li> <li style=" width:20px;height:10px;text-align:center;display:inline-block;*zoom:1;*display:inline;vertical-align:top;cursor:pointer;margin:0 5px;background:#666"> </li> </ul> </div> <ul class="hidden-nav" style="width:0;height:0;line-height:0;display:none"> <li> 1 </li> </ul> </div> </div> </div> </div>