950px轮播图片素材-求淘宝950的百叶窗轮播效果代码

一般的轮播图尺寸在 950*高度自设 满屏的尺寸在1320*自设高度 希望能帮到你 望采纳 谢谢

第一买模板

第二加代码

专业版旺铺可以使1920px尺寸的全屏大图轮播。下面是专业版1920大图全屏轮播代码,我测试过了可以使用,你只需要修改代码中的红色文字就可以了

<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:550px;overflow:hidden;">

<div class="taobaoux" style="height:550px;">

<div class="footer-more-trigger" style="width:1920px;height:550px;top:auto;padding:0px;border:none;left:50%;">

<div class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">

<div 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">

<div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

<div class="prev1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;"><</div>

<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:550px;overflow:hidden;">

<div class="taobaoux" style="height:550px;">

<div class="footer-more-trigger" style="width:1920px;height:550px;top:auto;padding:0px;border:none;left:50%;">

<div class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">

<div 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">

<div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

<div class="prev1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;"><</div>

<div class="next1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;">></div>

</div>

<div 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="此处替换图片连接1" style="padding:0px;margin:0px;">

<img src="此处替换图片网址1" width="1920px" height="550px" border="0px"></a></li>

<li style="width:1920px;height:550px;padding:0px;margin:0px;">

<a target="_blank" href="此处替换图片连接2" style="padding:0px;margin:0px;">

<img src="此处替换大图片网址2" width="1920px" height="550px" border="0px"></a></li>

<li style="width:1920px;height:550px;padding:0px;margin:0px;">

<a target="_blank" href="此处替换图片连接3" style="padding:0px;margin:0px;">

<a target="_blank" href="此处替换图片连接4" style="padding:0px;margin:0px;">

<img src="此处替换大图片网址4" width="1920px" height="550px" border="0px"></a></li>

<li style="width:1920px;height:550px;padding:0px;margin:0px;">

<a target="_blank" href="此处替换图片连接5" style="padding:0px;margin:0px;">

<img src="此处替换大图片网址5" width="1920px" height="550px" border="0px"></a></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(此处替换小图片导航背景网址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: 47px;">

<img src="此处替换小图片网址1" 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: 47px;">

<img src="此处替换小图片网址2" 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: 47px;">

<img src="此处替换小图片网址3" 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: 47px;">

<img src="此处替换小图片网址4" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

<ul class="ks-switchable-nav" style="display:none;"></ul>

</div

<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'}">

<ul class="lst-main">

<li><a href="#"><img src="#" style="width:950px;height:500px;" /></a></li>

<li><a href="#"><img src="#" style="width:950px;height:500px;" /></a></li>

<li><a href="#"><img src="#" style="width:950px;height:500px;" /></a></li>

<li><a href="#"><img src="#" style="width:950px;height:500px;" /></a></li>

</ul>

</div>

代码解释:

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

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

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

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