⑴ 淘寶全屏輪播代碼圖片左右兩邊顯示不全!!
你可以試試下面這個!希望對你有幫助!我的是1920x599的!圖片可以改!
---------------------------------------------------------------
<div style="height:579px;" class="QdotCode"> <div class="footer-more-trigger most-footer Qdotpstu63LNg" style="border:none 0;padding:0;background-color:transparent;width:1920px;height:599px;border:none;padding:0;top:auto;left:auto;"><div class="footer-more-trigger most-footer Qdotpstu63LNg" style="border:none 0;padding:0;background-color:transparent;width:1920px;height:599px;left:-485px;top:-20px;border:none;padding:0;overflow:hidden;"> <div class="Qdotlayeru63LNg" style="height:599px;width:1920px;overflow:hidden;"> <div class="Qdotwrapu63LNg J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect': 'scrollx','easing': 'easeIn','circular':true,'interval':'5','ration':0.5,'autoplay':true,'contentCls': 'Qdotcontentu63LNg','prevBtnCls':'Qdotprevu63LNg','nextBtnCls':'Qdotnextu63LNg'}" style="height:599px; width:1920px; overflow: hidden; position: relative;"> <div class="most-footer footer-more-trigger" style="width:1920px;height:60px;border:none 0;padding:0;background-color:transparent;z-index:80;left:auto;top:529px;"> <ul class="ks-switchable-nav Qdotpstu63LNg" style="width:426px;height:60px;border:none 0;text-align:center;clear:both;margin:0 auto;"> <li style="list-style-type:none;float:left;width:120px;height:60px;background-color:#CCCCCC;border:#666666 1px solid;margin:0 10px;cursor:pointer;"> <img border="0" src="圖片鏈接1" height="60px" width="120px" /></li> <li style="list-style-type:none;float:left;width:120px;height:60px;background-color:#CCCCCC;border:#666666 1px solid;margin:0 10px;cursor:pointer;"> <img border="0" src="圖片鏈接2" height="60px" width="120px" /></li> <li style="list-style-type:none;float:left;width:120px;height:60px;background-color:#CCCCCC;border:#666666 1px solid;margin:0 10px;cursor:pointer;"> <img border="0" src="圖片鏈接3" height="60px" width="120px" /></li> </ul> </div> <ul class="Qdotcontentu63LNg clearfix" style="top: 0px; position: absolute;z-index:9;width:999999px;"> <li style="list-style-type:none;margin:0px;padding:0px;width:1920px;height:599px;float:left;"> <a target="_blank" href="圖片連接1的地址" style="padding:0px;margin:0px;"> <img border="0" src="圖片鏈接1" height="599" width="1920" /></a> </li> <li style="list-style-type:none;margin:0px;padding:0px;width:1920px;height:599px;float:left;"> <a target="_blank" href="圖片鏈接2的地址" style="padding:0px;margin:0px;"> <img border="0" src="圖片鏈接2" height="599" width="1920" /></a> </li> <li style="list-style-type:none;margin:0px;padding:0px;width:1920px;height:599px;float:left;"> <a target="_blank" href="圖片鏈接3的地址" style="padding:0px;margin:0px;"> <img border="0" src="圖片鏈接3" height="599" width="1920" /></a> </li> </ul><div class="most-footer footer-more-trigger" style="width:950px;height:60px;z-index:90;top:269.5px;overflow:hidden;clear:both;border:none 0;background:none;left:485px;"><span class="Qdotprevu63LNg Qdotpstu63LNg" style="width:auto;border:none 0;padding:0;background-color:transparent;float:left;cursor:pointer;"> <img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/388098642/TB2ntdbcpXXXXX5XpXXXXXXXXXX_!!388098642.png" src="http://img01.taobaocdn.com/imgextra/i1/388098642/TB2ntdbcpXXXXX5XpXXXXXXXXXX_!!388098642.png" width="60" height="60" /></span> <span class="Qdotnextu63LNg Qdotpstu63LNg" style="width:auto;border:none 0;padding:0;background-color:transparent;float:right;cursor:pointer;"> <img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/388098642/TB2.18ccpXXXXXJXpXXXXXXXXXX_!!388098642.png" src="http://img04.taobaocdn.com/imgextra/i4/388098642/TB2.18ccpXXXXXJXpXXXXXXXXXX_!!388098642.png" width="60" height="60" /></span> </div> </div></div></div></div></div></div>
------------------------------------------------
剩下四個網址是圖標(也就是箭頭)的地址,不用管它!不礙事!如果不想要,換了就行!
⑵ 求一個淘寶網店全屏輪播banner代碼 求大神賜教~~~
可以到好模板看看,有全屏輪播代碼製作
⑶ 淘寶首頁全屏代碼下如何插入輪播圖片代碼
直接用全屏輪播代碼。
天貓店:
<div class="MaGong" style="height:0px;">
<div class="sn-simple-logo" style="left:auto;right:auto;width:990px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; ">
<div class="sn-simple-logo" style="left:-465px;top:0px;height:輪播圖片高度px;width:1920px;border:none;padding:0;background:none; ">
<div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','ration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget">
<div class="J_TWidget Mprev" data-widget-config="{'trigger':'.IX','align':{'node':'.IX','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="Mprev" style="font-size:100px;cursor:pointer;"><img src="http://img04.taobaocdn.com/imgextra/i4/126112166/TB2EaKBaXXXXXXxXXXXXXXXXXXX-126112166.png"></div>
</div>
<div class="J_TWidget Mnext" data-widget-config="{'trigger':'.IX','align':{'node':'.IX','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="Mnext" style="font-size:100px;cursor:pointer;"><img src="http://img02.taobaocdn.com/imgextra/i2/126112166/TB2s_WAaXXXXXXQXXXXXXXXXXXX-126112166.png"></div>
</div>
<div class="IX" style="height:輪播圖片高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;">
<ul class="macontent" style="height:輪播圖片高度px;width:1920px;padding:0px;margin:0px;">
<li class="item"><a target="_blank" href="圖片1商品鏈接"><img src="圖片1"></a></li><li class="item"><a target="_blank" href="圖片2商品鏈接"><img src="圖片2"></a></li>
</ul>
</div>
<div class="sn-simple-logo" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;">
<div class="sn-simple-logo" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">
<ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;">
<li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li>
</ul>
</div>
<div class="sn-simple-logo" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">
<ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;">
<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li></ul></div></div></div> </div></div></div>
淘寶店專業版:
<div class="MaGong" style="height:0px;">
<div class="footer-more footer-more-trigger" style="left:auto;right:auto;width:950px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; ">
<div class="footer-more footer-more-trigger" style="left:-485px;top:0px;height:輪播圖片高度px;width:1920px;border:none;padding:0;background:none; ">
<div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','ration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget">
<div class="J_TWidget Mprev" data-widget-config="{'trigger':'.WN','align':{'node':'.WN','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="Mprev" style="font-size:100px;cursor:pointer;"><img src="http://img04.taobaocdn.com/imgextra/i4/126112166/TB2EaKBaXXXXXXxXXXXXXXXXXXX-126112166.png"></div></div>
<div class="J_TWidget Mnext" data-widget-config="{'trigger':'.WN','align':{'node':'.WN','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="Mnext" style="font-size:100px;cursor:pointer;"><img src="http://img02.taobaocdn.com/imgextra/i2/126112166/TB2s_WAaXXXXXXQXXXXXXXXXXXX-126112166.png"></div></div>
<div class="WN" style="height:輪播圖片高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;">
<ul class="macontent" style="height:輪播圖片高度px;width:1920px;padding:0px;margin:0px;">
<li class="item"><a target="_blank" href="圖片1商品鏈接"><img src="圖片1"></a></li><li class="item"><a target="_blank" href="圖片2商品鏈接"><img src="圖片2"></a></li></ul></div>
<div class="footer-more footer-more-trigger" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;">
<div class="footer-more footer-more-trigger" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">
<ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;">
<li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li>
</ul>
</div>
<div class="footer-more footer-more-trigger" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">
<ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;">
<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li></ul></div></div></div></div></div></div>
淘寶基礎版:
<div class="MaGong" data-title="來自淘寶代碼生成網www.001daima.com" data-time="1502845797" style="height:0px;">
<div class="footer-more footer-more-trigger" style="left:auto;right:auto;width:950px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; ">
<div class="footer-more footer-more-trigger" style="left:-485px;top:0px;height:輪播圖片高度px;width:1920px;border:none;padding:0;background:none; ">
<div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','ration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget">
<div class="J_TWidget Mprev" data-widget-config="{'trigger':'.UF','align':{'node':'.UF','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="Mprev" style="font-size:100px;cursor:pointer;"><img src="http://img04.taobaocdn.com/imgextra/i4/126112166/TB2EaKBaXXXXXXxXXXXXXXXXXXX-126112166.png"></div>
</div>
<div class="J_TWidget Mnext" data-widget-config="{'trigger':'.UF','align':{'node':'.UF','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="Mnext" style="font-size:100px;cursor:pointer;"><img src="http://img02.taobaocdn.com/imgextra/i2/126112166/TB2s_WAaXXXXXXQXXXXXXXXXXXX-126112166.png"></div>
</div>
<div class="UF" style="height:輪播圖片高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;">
<ul class="macontent" style="height:輪播圖片高度px;width:1920px;padding:0px;margin:0px;">
<li class="item"><a target="_blank" href="圖片1商品鏈接"><img src="圖片1"></a></li><li class="item"><a target="_blank" href="圖片2商品鏈接"><img src="圖片2"></a></li>
</ul>
</div>
<div class="footer-more footer-more-trigger" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;">
<div class="footer-more footer-more-trigger" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">
<ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;">
<li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li>
</ul>
</div>
<div class="footer-more footer-more-trigger" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">
<ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;">
<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li></ul></div></div></div> </div> </div></div>
⑷ 淘寶全屏圖片輪播的代碼里,如何修改高度和寬度
把代碼里有這兩個英文後面的參數都改掉就可以了【width:1920px;height:500px】『width這個是寬的意思;height這個是高的意思。略看了我自己的代碼大約7處地方要修改的,不知道你的代碼怎麼樣,可能有點出入。其實主要修改高就可以了,現在寬都是普遍設置1920XP了,在設計廣告圖片的時候主要信息不要超出1440XP就可以了,這樣95%以上的顯示器都能看到主要的內容了。
⑸ 淘寶首頁的全屏海報裝修方法
裝修方法步驟如下:
1,進入裝修後台的圖片空間,將你選擇要輪播的海報上傳上去。
2,打開之前在網上下載的那段輪播海報代碼。
選擇編輯——替換,將原代碼中的500全部替換為海報高度,然後將這段代碼復制下來。
3,進入店鋪裝修頁面,在主屏的第一屏海報位置新建一個自定義頁面,點擊,切換到代碼模式。
4,將之前復制的那段代碼黏貼上去。找到代碼中的圖片鏈接部分。
5,再次進入圖片空間,將大圖海報的鏈接地址復制下來。替換到原來的代碼的圖片鏈接位置。
6,代碼都改完之後,按回到圖片模式,這時候會發現什麼圖都看不到。不用擔心,點擊預覽或者發布,就能看到全屏輪播海報效果啦。
附上全屏輪播海報代碼:
<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'piao1365065449925fu'}" data-widget-type="Tabs">
<div class="piao1365065449925fu" style="height: 500px;">
<div class="J_TWidget" data-widget-config="{
'contentCls': 'slide-kun1365065449925content',
'triggerCls': 'slide-kun1365065449925triggers',
'navCls': 'slide-kun1365065449925triggers',
'triggerType': 'mouse',
'effect': 'scrollx',
'prevBtnCls':'prev',
'nextBtnCls':'next',
'steps': 1,
'autoplay': true,
'viewSize':[1920],
'circular': true
}" data-widget-type="Carousel" style="margin: 0px; padding: 0px; left: -180px; top: 0px; width: 1920px; z-index: 10;">
<div class="J_TWidget" data-widget-config="{'trigger':'.first1365065449925trigger','align':{'node':'.first1365065449925trigger','offset':[0,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display: none;">
<div class="prev" style="width: 90px; height: 90px; float: left;">
<img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/725308504/T23AgjXgNbXXXXXXXX_!!725308504.png" /></div>
<div class="next" style="width: 90px; height: 90px; margin-left: 950px;">
<img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/725308504/T24F7ZXX0aXXXXXXXX_!!725308504.png" /></div>
</div>
<div class="first1365065449925trigger" style="margin: 0px; padding: 0px; width: 1920px; height: 500px; overflow: hidden;">
<ul class="slide-kun1365065449925content" style="margin: 0px; padding: 0px; width: 1920px; height: 500px;">
<li style="margin: 0px; padding: 0px; width: 1920px; height: 500px; list-style-type: none;">
<a href="http://chenruimy.tmall.com/?&&scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank"><img border="0" data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/725308504/T2MRIYXhVaXXXXXXXX_!!725308504.jpg" height="500" width="1920" /></a></li>
<li style="margin: 0px; padding: 0px; width: 1920px; height: 500px; list-style-type: none;">
<a href="http://chenruimy.tmall.com/?&&scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank"><img border="0" data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/725308504/T22tsZXldXXXXXXXXX_!!725308504.jpg" height="500" width="1920" /></a></li>
<li style="margin: 0px; padding: 0px; width: 1920px; height: 500px; list-style-type: none;">
<a href="http://chenruimy.tmall.com/?&&scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank"><img border="0" data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/725308504/T2i0uMXoVbXXXXXXXX_!!725308504.jpg" height="500" width="1920" /></a></li>
<li style="margin: 0px; padding: 0px; width: 1920px; height: 500px; list-style-type: none;">
<a href="http://chenruimy.tmall.com/?&&scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank"><img border="0" data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/725308504/T2RhcZXcVXXXXXXXXX_!!725308504.jpg" height="500" width="1920" /></a></li>
</ul>
</div>
<ul class="slide-kun1365065449925triggers" style="margin: 0px; padding: 0px; display: none;">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
</div>
⑹ 淘寶全屏的輪播代碼是怎麼做的
全屏海報輪播效果自已弄代碼,如果不是很了解HTML是比較麻煩的,懂代碼的自然就不用說了 分分鍾搞定的事情,有個工具可以推薦用下,免費的,不管幾張圖片 特效等都能一鍵生成,比較靠譜,新手也能裝修 店招 全屏海報製作 視頻網頁鏈接
⑺ 求解淘寶店鋪全屏海報圖片輪播css代碼
<div class="J_TWidget mypoper" data-widget-config="{'effect': 'fade','circular': true ,'contentCls':'sj-t','navCls':'sj-n','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-t">
<div class="J_TWidget" data-widget-config="{'contentCls': 'sj-content','navCls': 'sj-n','triggerType': 'click','effect': 'fade','steps': 1,'autoplay': true,'circular': true ,'prevBtnCls':'prev','nextBtnCls':'next'}" data-widget-type="Carousel">
<div class="pa2">
<div class="J_TWidget" data-widget-config="{'trigger':'.sj-content', 'align':{'node':'.mypoper', 'offset':[0,0], 'points':['cl','cl'] } }" data-widget-type="Popup" style="width:950px;display:none;">
<div class="ks-contentbox" style="padding-bottom:0px;margin:0px;padding-left:0px;width:950px;padding-right:0px;padding-top:0px;left:0px;">
<div class="prev" style="float:left;margin-left:50px;">
<img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1px;width:1px;" /></div>
<div class="next" style="float:right;margin-right:50px;">
<img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1px;width:1px;" /></div>
</div>
</div>
<ul class="sj-content" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1440px;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:1440px;padding-right:0px;height:600px;padding-top:0px;left:-250px;">
<a target="_blank"><img data-ks-lazyload="
圖片地址" /></a></li>
<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:440px;padding-right:0px;height:600px;padding-top:0px;left:-250px;">
<a target="_blank"><img data-ks-lazyload="
圖片地址" /></a></li>
</ul>
</div>
<div style="width:1920px;display:none;height:0px;overflow:hidden;">
<ul class="sj-t" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1440px;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:8600px;padding-top:0px;">
</li>
</ul>
</div>
<ul class="sj-n" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:none;height:1px;padding-top:0px;">
單詞解釋: width:1440px 這個是圖片寬度,親們可以自己設置多少。
height:600px 這個是圖片高度,也是親們自己設置。
left:-250px 這個是水平位置,圖片插入進去沒居中的,親們就慢慢增加或者減少數字,就可以調到居中的哈。有什麼問題再密我。