2024年3月28日发(作者：)

这几天，一直在网上研究怎么样装修的事情,本来对代码一窍不通的，最后天天在网上

搜一些关于代码的事情，最终凭着自己的慢慢摸索，终于一步一步把店铺装修起来了，下

面就分享一些在网上找到的有关如何用代码做轮播图的一些干货，大家可以利用这些把自

己的店铺装修得漂漂亮亮的.

如何自己做出漂亮的滚动图片加多个超级链接 ?下面来给大家分享下滚动图片中一张

图片中放入多个商品，

并且每个商品都有相应超链接的做法。

先用PS按照950px或者是其他的标准宽度（通栏标准宽度），高度就自己定义啦，先

制作第一张滚动图片：

如上图所示，把几个商品都放在一个图片上，这里暂时命名为图片1，保存在本地。

朋友们可以根据自己的需要确定做几张大图，我这里做了2张950宽的图片，分别为

图片1、图片2（假设每个图片有4个宝贝，就是说我这个滚动模块里一共可展示8件宝

贝）， 图片这里就展示一张，其他不展示了

然后大家可以下载一个dreamweaver,打开程序，新建一个“HTML”代码页。

删除新建页面里所有的代码，使之成为一个空白代码页面。

在导航栏里选择“插入”，选择本地电脑里刚保存的“图片1”，点击dreamweaver

页面的“设计”，可以看到打开的图片1：

接下来，我们对第一张大图进行添加热点分割并单个加链接：

1. 点击图片，dreamweaver页面下方会出现该图片的属性：

2. 选择“属性”里“地图”下方的框的形状，如果是规则形状可选矩形，如果是不

规则框就选最后一个。我这里选择正边形，点击正方形图标，然后在“图片1”上先选择

第一个要分割添加超链接的区域：

按照此方法，把大图上所有需要添加超链接的区域都单独选择完成：

3. 完成区域选择之后，我们来给每个区域添加超链接：

点击第一个选择区域，即图片上的第一双鞋子，在下方的“属性”里“链接”输入

该宝贝的宝贝详情页地址，亲们可以同时在目标里选择“_blank”(这个是用来设定买家点

击图片后在新窗口打开链接),地图处大家可以随意命名为mapxx

如此这般，把图片上的4件宝贝都分别添加好相应的超链接。

然后，点击编辑页上方的“代码”，亲们可以看到相应的代码，dreamweaver

已自动生成相应代码：

4.第一张图片完成多个超链接的添加，接下来我们按照1-3的方法，在后面插入图片

2，完成超链接添加后，（大家如果有更多的图片可依次插入添加）。

5. 接下来，我们开始添加滚动图片代码：

在dreamweaver已生成代码的最上方添加代码如下：

红色部分的代码一定要跟滚动图片的高度一致，否则显示不完整。

上方代码并不是完整的滚动图片代码，还需要在每张图片的代码前面添加

同时在每个后面添加 ，记住三张图片前后都要这么做。

完成之后，在所有代码的最后写上

这样就添加完了

6. 一个不可忽视的步骤：

把我们之前用PS做好的本地的2张大图全部上传到网络上，我是一张一张传到淘

宝的“图片空间”，然后把代码中每个相应的本地图片地址，全部换成图片空间里图片的

网络连接地址。如果不这么做的话，店铺里是显示不出来图片的

7. 准备工作完成，进入店铺装修，添加“用户自定义模块”，进入代码编辑，把刚

才的所有代码全部复制上去，保存，发布，就行了

大家赶紧去试试吧， 虽然有点复杂，但是如果只要认真看的话，就一定可以

成功的，我也是按照此方法成功了呢，谢谢大家的支持，这个方法是在网上看到的，但是

经过自己亲自的试验发现是可以成功的，特意分享给大家，希望大家能够用得到。大家有

空也可以看看到我店铺里面看看效果，淘宝店铺名是恒茂科技，希望大家都能够成功，一

起加油吧