如何做出漂亮的滚动图片加多个图片链接.docVIP

这几天，一直在网上研究怎么样装修的事情,本来对代码一窍不通的，最后天天在网上搜一些关于代码的事情，最终凭着自己的慢慢摸索，终于一步一步把店铺装修起来了，下面就分享一些在网上找到的有关如何用代码做轮播图的一些干货，大家可以利用这些把自己的店铺装修得漂漂亮亮的. 如何自己做出漂亮的滚动图片加多个超级链接 ?下面来给大家分享下滚动图片中一张图片中放入多个商品， 并且每个商品都有相应超链接的做法。 ??????? ? ? ? 先用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.???准备工作完成，进入店铺装修，添加“用户自定义模块”，进入代码编辑，把刚才的所有代码全部复制上去，保存，发布，就行了 ? ? ? 大家赶紧去试试吧，?虽然有点复杂，但是如果只要认真看的话，就一定可以成功的，我也是按照此方法成功了呢，谢谢大家的支持，这个方法是在网上看到的，但是经过自己亲自的试验发现是可以成功的，特意分享给大家，希望大家能够用得到。大家有空也可以看看到我店铺里面看看效果，淘宝店铺名是恒茂科技，希望大家都能够成功，一起加油吧