js仿淘寶詳情頁輪播圖

㈠ axure怎麼使用動態面板製作淘寶圖片輪播效果

使用Axure製作淘寶圖片輪播效果的步驟如下：

1. 准備圖片：

   • 下載圖片：首先，從相關來源下載需要在輪播中展示的圖片。

2. 引入圖片至Axure：

   • 將下載的圖片導入到Axure項目中。通常，可以通過拖拽的方式將圖片文件直接從文件管理器中拖放到Axure的工作界面中。

3. 創建動態面板：

   • 轉換圖片為動態面板：將引入的第一張圖片選中，然後右鍵選擇「轉換為動態面板」。
   • 添加狀態：在動態面板的屬性面板中，添加四個狀態（狀態1、狀態2、狀態3、狀態4）。每個狀態分別設置不同的圖片作為背景。

4. 設置自動輪播：

   • 添加頁面載入事件：在頁面屬性中，添加「頁面載入時」事件。
   • 設置狀態切換：在事件的動作中，選擇「設置動態面板狀態」，並配置為按順序循環切換動態面板的狀態。這樣可以實現圖片的自動輪播效果。

5. 添加導航按鈕：

   • 創建矩形按鈕：在頁面上添加四個矩形，作為導航按鈕。
   • 設置選中樣式：選中矩形，設置其選中時的背景色為橙色，透明度為50%。
   • 分組：將這四個矩形設置為一個選中組，以便它們之間可以相互切換選中狀態。

6. 為矩形添加事件：

   • 滑鼠移入事件：為每個矩形添加「滑鼠移入時」事件，動作設置為「設置選中/取消選中」，並將該矩形設置為選中狀態，同時設置動態面板的狀態為與該矩形對應的狀態。
   • 滑鼠移出事件：為每個矩形添加「滑鼠移出時」事件，動作同樣設置為「設置選中/取消選中」，但此時將該矩形設置為未選中狀態，並恢復動態面板的自動輪播。

7. 預覽與測試：

   • 運行Axure項目，預覽頁面效果。此時，應該可以看到圖片在自動輪播，當滑鼠移入右下角的矩形按鈕時，圖片會切換到對應的圖片，移出滑鼠後，圖片繼續輪播。

通過以上步驟，你就可以在Axure中製作出類似淘寶的圖片輪播效果。

㈡ 求解淘寶店鋪全屏海報圖片輪播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 這個是水平位置，圖片插入進去沒居中的，親們就慢慢增加或者減少數字，就可以調到居中的哈。有什麼問題再密我。

㈢ 淘寶店鋪店招製作問題 如圖所示 寫好代碼上傳後 文字集體下移 如何解決 求大神賜教

第一步：進入「我是賣家」點擊「店鋪裝修」
第二步：點擊添加新模板
第三步：點擊添加「圖片輪播」
第四步：進入編輯模塊：可以選擇自定義模塊標題，模塊高度，和模塊的切換效果，
點擊保存就了。
但是淘寶的輪播模塊有一定的局限性，看上圖就知道，它的高度可以自定義，但是它的寬度只有950和750兩種，不能自定義，比如我想做一個350寬的呢，就沒有辦法了，
另一個局限性就是寶貝詳情頁面沒有輪播圖片模塊：（看下圖，只有自定義和同類寶貝推薦，）
還有個局限性就是輪播圖片只能一個圖片對應一個連接地址（看下圖，一個圖片只對應一個跳轉的地址）
如果我想做成這樣一個圖片輪播（如下圖，是三個輪播圖片，第一張圖片上要有兩個連接點擊時分別跳轉到兩個地址），淘寶的輪播圖片模板就沒有辦法實現了
今天我要講的是自定義輪播圖片，也就是用html代碼做輪播圖片，它可以消除這些弊端！
有朋友在這就可能會說了，我不懂代碼，給我代碼我也不會用啊。
沒有關系！我就是針對不懂代碼的新手朋友們講的，懂的也不會看我在這里啰嗦了，是不是？呵呵！不嘮叨了，下面看看我要講的幾種不同的輪播代碼。
假如我有四張圖片想做成輪播圖片，
看看下面幾種方式是如何把這四張圖片自定義成輪播圖片的。
第一種是數字漸變輪播，（就是滑鼠點擊1、2.3.4的時候，圖片以漸變的形式播。）
如圖所示的這樣：（為了讓大家跟直觀一些，我用jif動態圖片仿做輪播效果，圖片漸變的效果么有做出來，不過效果差不多就這樣了。）
這是點擊右下角數字出現的輪播效果。咱們看看代碼怎麼做的，
第二種是數字上下輪播，（就是滑鼠點擊1、2.3.4的時候，圖片會上下輪播。它和第一種輪播圖片改動的地方是一樣的，參造上圖就行這里就不多說了。）
第三種是左右橫排圖片輪播，（就是點擊小圖片大圖片會以漸變的形式輪播，這是前兩種輪播的擴展，樣式更好看一些，也更直觀一些）
如圖所示那樣點擊右下角的小圖片，就會切換到大圖片，這種輪播和js、flash動畫效果差不多，很搶眼的。看代碼
提醒一下:小圖片1和大圖片1，小圖片2和大圖片2都是同一張圖片哦
第四種就是上下豎排圖片輪播（和第三種差不多，只是小圖片排列不一樣，但改動的地方是一樣的，這里就不多說了。）效果如下圖
懂代碼的朋友還可能在此基礎上做些不同的輪播，今天我就講這幾種，下面是代碼，大家可以把代碼復制到記事本里，改下尺寸，圖片地址，點擊圖片鏈接的地址，然後復制到淘寶自定義模塊里，就行了。

㈣ 求淘寶通欄圖片輪播代碼，包含js，css，html，類似下圖，求各路大神。

用firefox的 firebug插件查看元素，可以找到css，html的源代碼。用js操作動畫的代碼實現的方式不版同。
簡單的思路：權把三張圖P到一起，設置成背景，假如每張圖width：600px，用JS控制每1500毫秒（1.5秒）width增加600px，當width=1800px 設置width=600。

㈤ 求類似於淘寶產品詳情頁面大圖下面多個小圖然後點擊左右箭頭可以換圖片的那種效果的CSS或JS代碼

http://down.admin5.com/texiao/flash/這里有很多的。我這倆天正好做的個那·~但是JS有沖突，希內望到時候你也幫容我