淘宝网首页图片轮播制作

发布网友发布时间：2022-05-01 09:52

共7个回答

热心网友时间：2022-04-24 02:47

<div class="box">
<div class="shop-slider">
<div class="bd">
<div style="WIDTH: 340px; HEIGHT: 175px" class="slider-promo J_Slider tb-slide">
<ul style="HEIGHT: 175px">
<li><a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" src="请在这加入图片的地址" width="340" height="175"></a> </li>
<li>
<a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a> </li>
<li>
<a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a></li>
</ul>
<ul>
<li>1 </li>
<li>2 </li>
<li>3</li>
</ul>
</div>
</div>
</div>
</div>

直接复上去可以用了..如果你想要轮转更多张..那你就多复几行.....如下:
<div class="box">
<div class="shop-slider">
<div class="bd">
<div style="WIDTH: 340px; HEIGHT: 175px" class="slider-promo J_Slider tb-slide">
<ul style="HEIGHT: 175px">
<li><a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" src="请在这加入图片的地址" width="340" height="175"></a> </li>
<li>
<a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a> </li>
<li>
<a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a></li>
<li>
<a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a></li>
<li>
<a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a></li>
</ul>
<ul>
<li>1 </li>
<li>2 </li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
</div>
不明的可以问我..旺旺野蛮华华
你想修改轮转图片的大小就把..<div style="WIDTH: 340px; HEIGHT: 175px

340是图片图宽..175是高注意把每一行的都改下同一样的大小.

热心网友时间：2022-04-24 04:05

　　淘宝网首页图片轮播制作流程：
　　1.设计好促销图片。想要制作图片轮播，就必须要有图片，所以第一步就是要准备至少两张图片，这一步可以用photoshop设计好促销广告图片。
　　2.将图片上传到图片空间。登录淘宝，点击卖家中心，点击进入图片空间。
　　3.点击图片上传，这里建议使用通用上传，点击添加添加图片即可从的电脑中上传图片到图片空间。
　　4.装修状态，插入“图片轮播”。返回卖家中心，点击店铺装修，点击添加模块，然后，会出现一个选框，点击添加“图片轮播”，点击编辑。
　　模块标题：可以设置模块标题，如果不想显示标题可以点击旁边的小选框中打钩。
　　模块高度：准备的图片，宽度、高度要一致。图片宽度根据的图片实际高度而设置，图片轮播宽度为淘宝设置，750px不变。如果没有找到合适的高度，可以选择自定义。
　　切换效果：分为上下滚动和渐变滚动两种方式，根据自己的需要选择。
　　5.指定图片和连接目标。点击下面图片中红色区域中的小图片，就可以使用图片空间中的图片。
　　6.鼠标放在选中的图片上，鼠标“右击”点击复制图片地址。黏贴到图片地址的选框中。连接地址就是点击促销图片会转到指定的详情宝贝页面，当首页点击一个宝贝商品时，会跳到相应的宝贝详情页面。复制列如以下图片地址，黏贴到连接地址即可。
　　7.到此为止，图片轮播也就做好了，最后保存。

热心网友时间：2022-04-24 05:40

热心网友时间：2022-04-24 07:31

<div class="box">
<div class="shop-slider">
<div class="bd">
<div style="WIDTH: 340px; HEIGHT: 175px" class="slider-promo J_Slider tb-slide">
<ul style="HEIGHT: 175px">
<li><a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" src="请在这加入图片的地址" width="340" height="175"></a> </li>
<li>
<a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a> </li>
<li>
<a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a></li>
</ul>
<ul>
<li>1 </li>
<li>2 </li>
<li>3</li>
</ul>
</div>
</div>
</div>
</div>
直接复上去可用了..如果你想要轮转slider-promo J_Slider tb-slide">
<ul style="HEIGHT: 175px">
<li><a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" src="请在这加入图片的地址" width="340" height="175"></a> </li>
<li>
<a href="在这里加入宝贝的超级链接" target="_blank">
img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a> </li> <li>
<a href="在这里加入宝贝的超级链接" target="_blank">
<img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a></li>
<li>
<a href="在这里加入宝贝的超级链接" target="_blank">
img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a></li>
<
<a href="在这里加入宝贝的超级链接" target="_blank" <img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"></a></li>
</ul>

<li>1 </li>
<li>2/li>
<li>3</i>
<li>4</l
<li>5</li>
</ul>
</div>
</div>
</div>
</div>

................

热心网友时间：2022-04-24 09:39

这是js代码，你拷一下淘宝的html跟css，引用下就行了，我刚好在做这个囧，不过滑动效果还没做

$(function(){
/* slide-player */
var i=0;
var timeInterval = 4000;
var slide=$(".slide-list>li");
var st=$(".slide-triggers>li");

slide.hide();
$(slide[0]).show();
/*自动切换函数*/
function auto(){
i<slide.length-1?i++:i=0;
slide.eq(i).show().siblings().hide(); /*siblings 同级元素隐藏除去i等于li中的索引*/
st.eq(i).addClass("ks-active").siblings().removeClass("ks-active"); /*triggers中的样式显示与隐藏*/
}
set = setInterval(auto,timeInterval); /*在指定的timeInterval内，调用auto函数*/
/*鼠标悬停事件*/
st.mouseover(function(){
clearInterval(set); /*clearInterval(set)方法可取消由setInterval()设置的 timeout。*/
i=$(this).index();
slide.eq(i).show().siblings().hide();
st.eq(i).addClass("ks-active").siblings().removeClass("ks-active");
});
/*鼠标停在slide-player上*/
slide.mouseover(function(){
clearInterval(set);
});
slide.mouseout(function(){
set = setInterval(auto,timeInterval); /*重新调用auto函数*/
});
}

热心网友时间：2022-04-24 12:04

950的轮播？？过时了吧？？

现在都全屏海报轮播了，需要的自己去我的百度空间看

热心网友时间：2022-04-24 14:45

广州