哈哈各位新手大家好,其实我也是个新手,淘宝上的新手,在淘宝上潜水了几天,可了不少前辈的教程,但关于“滚动图片的帖子”感觉写的太笼统,不懂HTML代码的很难看明白,我就在这里献丑,写个更详细的来让大家明白
明白。当然会用或者已经懂的可以不用看下去了。好废话不多说制作方法开始。
先看效果(由于只是介绍制作方法,我就不美化图片或者格局了,只是个简单的效果)
这里咱们先了解下要使用到的代码“marquee”
"marquee"就是控制一组图片或字体上下左右或者交叉移动的HTML代码,不知道各位计算机上面装的有“dreamweaver”
这个软件,要有请运行它,要没有继续望下看。象此类效果要用到的表格肯定不能少,因表格能起到很好的布局作用。
1、先制作一个表格
打开“dreamweaver”没有的打开“记事本”先写如下代码,要注意格式。
<table width="480" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
我来简单拆分代码解释下
table width="480" height="120" 表示建立一个表格的宽度为480象素 高度为120象素
这段代码是控制图片滚动的在你店铺里面显示的位置,位置控制好后就要加入图片了哈哈
<table width="480" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>我们要加入图片的位置就在这里</td>
</tr>
</table>
现在看看加入图片的代码怎么写(红色部分是新写的代码)
<table width="480" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" height="120"></td>
<td width="120" height="120"></td>
<td width="120" height="120"></td>
<td width="120" height="120"></td>
<td width="120" height="120"></td>
</tr>
</table></td>
</tr>
</table>
再看看红色的部分代码拆分的意思,值得注意的是红色部分我们建立了5个单元格(红色部分有5个<tdwidth="120"
height="120"></td>竖着排列),也就是你可以插入5个图片来相互滚动,要是想要6个图片的话就用6个“
<tdwidth="120" height="120"></td>竖着排列”以此类推。现在我们来插入图片,图片的方法插入相对简单我们
只要在红色部分的<td></td>
中间插入<img src="这里为你的图片地址">图片的大小一定要提前设置好了,因为我们的表格是宽600分成5个单元格
所以单个图片的宽度就是120像素,表格的高度是120像素,所以图片高也是120像素。分匹一个一个的把图片插入到
对应单元格里面 代码如下
<table width="480" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
</tr>
</table></td>
</tr>
</table>
最后就是竣工阶段了,为图片设置滚动。在你有图片的表格前后写上“marquee”写这个代码的位置如下红色部分
<table width="480" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><marquee scrollamount="1" scrolldelay="3" behavior="alternate"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
</tr>
</table></marquee></td>
</tr>
</table>
到此滚动效果已经完成,只要装修到你店铺自定义区里,点下“编辑源文件”把代码复制进去就好了。
如果还有什么不明白的就Q我吧。其实装修店铺不是很难,一些银冠级店铺装的花枝招展的,最终都离不开表格和DIV去布局
淘宝只支持HTML所以只能用表格,然表格是最简单易学的,你只要半天就能把表格代码掌握。哈哈通过上面的效果。我
们可以举一反三,制作相互滚动,或滚动交叉的高级效果。赶快行动把滚动效果实现到你店铺里去吧。初次发帖,有
做的不周到的地方大家多提意见,关于什么店铺音乐之类的我就不说了,以前有人问过我,就是一段代码就搞定。
这里我再说下现在淘宝已支持图片轮播了,但是只给了个编辑模块,也就是说无法实现轮换在你规定的位置,只要掌握好布局和css内联样式就可实现图片轮换的定位了。
还有就是不建议在店铺应用图片太多,这个客户打开你的网站速度可是很慢的哦。所以尽量减少太多太大的图片出现在你店铺,也就等同与减少了客户浏览你网站的等待时间。