A. 天貓商城輪播圖放幾張圖片比較合適,間隔時間多長比較吸引眼球
您好,中公教育為您服務。
天貓商城輪播圖一般以3張為佳,多張輪播也是可以的,如果您的宣傳產品真的需要。間隔時間主要以您想要推廣的產品以及您的輪播圖片張數來定比較合理,時間不宜過長,因為過長的時間可能買家無法看到所有的輪播而錯過某些宣傳。如果有其他問題您可以進入中公電商學院進行咨詢與學習。
如有疑問,歡迎向中公教育企業知道提問。
B. 淘寶首頁全屏代碼下如何插入輪播圖片代碼
直接用全屏輪播代碼。
天貓店:
<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>
C. 簡單的HTML+js圖片輪播
h5代碼:
<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>
css代碼:
<style type="text/css">
@-webkit-keyframes move{
0%{left:-500px;}
100%{left:0;}
}
#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;
overflow: hidden;}
#list{position:absolute;left:0;top:0;padding:0;margin:0;
-webkit-animation:5s move infinite linear;width:200%;}
#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;
color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微軟雅黑';}
#wrap:hover #list{-webkit-animation-play-state:paused;}
</style>
(3)歐美女裝輪播圖素材擴展閱讀:
輪播圖就是一種網站在介紹自己的主打產品或重要信息的傳播方式。說的簡單點就是將承載著重要信息的幾張圖片,在網頁的某一部位進行輪流的呈現,從而做到讓瀏覽者很快的了解到網站想要表達的主要信息。以及各種新聞網站的頭版頭條都是用這種方式呈現的重要信息。
輪播圖的實現方式:例如:有5張輪播的圖片,每張圖片的寬度為1024px、高度為512px.那麼輪播的窗口大小就應該為一張圖片的尺寸,即為:1024×512。之後將這5張圖片0px水平相接組成一張寬度為:5120px,高度依然為:512px。最後將這張合成後的大圖每次向左移動1024px即可實現輪播圖。
D. 怎麼給輪播圖片中的一張圖片添加多個鏈接地址
<div style="width:400px; height:400px; background-image:你的圖片">
<a href="上面圖片的地址"><span style="width:400px; height:200px;" ></></a>
<a href="下面圖片的地址"><span style="width:400px; height:200px;" ></></a>
</div>
把輪播的圖片設為div的背景圖片然後改為輪播div就可以了;
在div中加入兩個span標簽,大小按你的圖片來,然後給兩個span標簽分別加上對應的a標簽
E. 淘寶圖片輪播的尺寸像素一般比例是多少呢, 到輪播裡面 右邊總是空白著一塊,求好心大神幫助!!謝謝啦
一般的輪播圖尺寸在 950*高度自設 滿屏的尺寸在1320*自設高度 希望能幫到你 望採納 謝謝
F. 淘寶店鋪PC端怎麼插入多張輪播圖
需要設置。
步驟1、首先登陸淘寶網首頁,輸入淘寶賬號密碼進入賣家中心。在賣家中心中點擊【店鋪裝修】。
2、然後在店鋪裝修頁面,找到左側基礎模塊中的【圖片輪播】,滑鼠左鍵按住它,將它拖動到右側需要添加圖片輪播的空白位置。
3、在空白處松開滑鼠。
4、然後就可以看到添加的圖片輪播模塊,默認圖片是白雪松樹畫面。
5、點擊右上角的【編輯】。
6、在內容設置裡面,可以看到圖片地址。那麼,圖片地址在哪裡呢。需要特別注意,首先需要把圖片輪播的圖片素材放到店鋪的圖片空間裡面哦。這是淘寶規則之一。
7、那麼,我們回到當初的賣家中心,點擊左邊店鋪管理裡面的【圖片空間】。
8、然後找到圖片輪播素材圖片,點擊其中一個圖片,右擊選擇【屬性】。
9、然後在回到裝修頁面,將剛才復制的圖片地址粘貼。
10、然後點擊【保存】。
11、然後就可以看到保存後的效果了。
12、這只是添加了一張圖片啊,圖片輪播當然要添加多張圖片,怎麼繼續添加輪播圖片。仍然點擊右上角的【編輯】。
13、然後找到添加。接下來的步驟就是繼續添加另外圖片地址了。
G. 淘寶店鋪里的輪播圖片怎麼製作
淘寶店鋪里的輪播圖片製作方法流程:
1.登錄後,單擊「賣家中心」然後在下圖中,選擇「店鋪裝修;
2.在店招下方,找到自定義內容區,點擊「編輯」;
3.如果沒有自定義內容區,則單擊下圖的「在此處添加新模塊」;
4.然後在下圖中,選擇「自定義內容區」後的」添加」;
5.將代碼中的「圖片地址1」改為需要輪播的第一張圖片的地址,引號要保留;
6.首先進入圖片空間,找到要輪播的第一張圖片:
6.單擊圖的「鏈接」兩個字,輪播的第一張圖片的地址就復制好了,只要選中「圖片地址1」粘貼即可。
「寶貝地址1」改為需要鏈接的地址。此地址為單擊 輪播的第一張圖片時打開的頁面地址。
7.單擊「出售中的寶貝」找到圖片對應的寶貝:單擊「復制鏈接」 「寶貝地址1」就復制好了,只要選中「寶貝地址1」粘貼即可。
重復第7步,把「圖片地址2」「寶貝地址2」「圖片地址3」「寶貝地址3」進行修改。
8.進入下面這個界面,點擊黑筆圈起來的那個圖標,進行代碼編輯,將修改後的代碼粘貼進去。並單擊「保存」按鈕單擊「發布「按鈕,就可以發布了。
9.確認發布後,單擊「查看我的店鋪「就可以看到效果。
H. 商品輪播圖請使用售賣商品的圖片是什麼意思
摘要 其實,有很多的拼多多賣家都會設置一個主圖輪播模式,其實非常容易理解,賣家上傳很多的主圖,然後主圖就會像滾動屏幕一樣來回反復,當消費者點開的時候,就可以更好的展示店鋪商品的特點了。這個功能賣家也是可以另做它用的,賣家可以在店鋪的主頁配置輪播圖引薦位,展示自己店鋪的熱門商品或者是活動商品,吸引買家,提高商品的曝光率,同時也是店鋪整體規模的一種體現。
I. 親們:有誰可以告訴我,怎麼調整店鋪輪播圖片的大小呀!我添加的輪播圖片顯示總是太小。
圖片的長寬高要跟輪播的圖片一樣的寬和高。輪播有長950PX ,高可以自己定義。也有長750PX,高也可以自己定義。
J. 如何在網頁上添加輪播圖片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pic player</title>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/tween.js"></script>
</head>
<style type="text/css">
img{border:0;}
</style>
<body>
<div id="picplayer" style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid 1px #ccc;">
there is a pic-player
</div>
<script>
var p = $('#picplayer');
var pics1 = [{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net/#',time:5000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net/#',time:4000},{url:'http://img.jb51.net/online/picPlayer/3.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net',time:6000}];
initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]);
//
//
function initPicPlayer(pics,w,h)
{
//選中的圖片
var selectedItem;
//選中的按鈕
var selectedBtn;
//自動播放的id
var playID;
//選中圖片的索引
var selectedIndex;
//容器
var p = $('#picplayer');
p.text('');
p.append('<div id="piccontent"></div>');
var c = $('#piccontent');
for(var i=0;i<pics.length;i++)
{
//添加圖片到容器中
c.append('<a href="'+pics[i].link+'" target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>');
}
//按鈕容器,絕對定位在右下角
p.append('<div id="picbtnHolder" style="position:absolute;top:'+(h-25)+'px;width:'+w+'px;height:20px;z-index:10000;"></div>');
//
var btnHolder = $('#picbtnHolder');
btnHolder.append('<div id="picbtns" style="float:right; padding-right:1px;"></div>');
var btns = $('#picbtns');
//
for(var i=0;i<pics.length;i++)
{
//增加圖片對應的按鈕
btns.append('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> '+(i+1)+' </span> ');
$('#picbtn'+i).data('index',i);
$('#picbtn'+i).click(
function(event)
{
if(selectedItem.attr('src') == $('#picitem'+$(this).data('index')).attr('src'))
{
return;
}
setSelectedItem($(this).data('index'));
}
);
}
btns.append(' ');
///
setSelectedItem(0);
//顯示指定的圖片index
function setSelectedItem(index)
{
selectedIndex = index;
clearInterval(playID);
//alert(index);
if(selectedItem)selectedItem.fadeOut('fast');
selectedItem = $('#picitem'+index);
selectedItem.fadeIn('slow');
//
if(selectedBtn)
{
selectedBtn.css('backgroundColor','#eee');
selectedBtn.css('color','#000');
}
selectedBtn = $('#picbtn'+index);
selectedBtn.css('backgroundColor','#000');
selectedBtn.css('color','#fff');
//自動播放
playID = setInterval(function()
{
var index = selectedIndex+1;
if(index > pics.length-1)index=0;
setSelectedItem(index);
},pics[index].time);
}
}
</script>
</body>
</html>
詳細出處參考:http://www.jb51.net/article/17008.htm
是否可以解決您的問題?