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有冲突，希内望到时候你也帮容我