当前位置:首页 > 知识 > 设计 > 正文内容

旺铺自定义内容页如何实现图片轮播

innov9年前 (2016-02-27)设计7810

在这里分享一下左右滚动图片并且带多个链接的源代码:

<p>
  <marquee behavior="alternate" scrollamount="3">
    <a href="产品的地址">
      <img src="图片的链接" alt="" width="200" height="220" border="0"/>
    </a>
  </marquee>
</p>

上面这一段代码是一张滚动的图片,如果要添加多张图片,就多加几条
<a href="产品的地址"><img src="图片的链接" alt="" width="200" height="220" border="0" /></a>
如下:

<p>
  <marquee behavior="alternate" scrollamount="3">
   <a href="产品的地址">
    <img src="图片的链接" alt="" width="200" height="220" border="0"/>
   </a>
   <a href="产品的地址">
    <img src="图片的链接" alt="" width="200" height="220" border="0"/>
   </a>
    <a href="产品的地址">
    <img src="图片的链接" alt="" width="200" height="220" border="0"/>
   </a>
   <a href="产品的地址">
      <img src="图片的链接" alt="" width="200" height="220" border="0"/>
    </a>
 </marquee>
</p>

代码解释:

alternate是滚动的方向,alternate表示左右滚动,如果想改变滚动方向,可把alternate改成up(上),down(下),left(左),right(右),图片就会向相应的方向滚动

scrollamount="3",3是图片滚动的速度,想滚动速度快点就把数字改大一点。

<a href="产品的地址"><img src="图片的链接" alt="" width="200" height="220" border="0" /></a>

这一段就是要滚动的图片以及点击图片的链接,此代码是点击图片后会在同一窗口打开新链接,如果要在新窗口中弹出链接地址,那么在"产品的地址"后面加上target="_blank"。width="200"是图片的宽度,height="220"是图片的高度,可根据自己的图片大小来改动。border="0"是边框,设为0即没有边框。

 

代码下载(右键目标另存为):自定义内容区轮播代码.txt

 

扫描二维码推送至手机访问。

版权声明:本文由知新日笺发布,如需转载请注明出处。

本文链接:https://innovdn.cn/post/343.html

标签: 淘宝装修
分享给朋友:

“旺铺自定义内容页如何实现图片轮播” 的相关文章

13种常规的字体设计方式

13种常规的字体设计方式

1、尖角法把字的角变成直尖、弯尖、斜尖、卷尖可以是竖的角可以是横的角。尖角字体设计眼谷字体设计2、横细竖粗法选定个字体后,把横减细就可以了。印象时代字体设计绝对tt字体3、减细法所有字体横和竖变细双溪天城logo晶都国际字体4、连体法左右或左中右,或右中连、上下连体(找到一些能连在一起的点或线)城市...

如何将产品图片PS成线稿图

如何将产品图片PS成线稿图

ps将图片变线稿1、进入ps软件中,将需要变成线稿的图片导入ps中。2、导入之后,在键盘上按下快捷键ctrl+shift+u将图片去色。3、将图片去色之后,再按“ctrl+i”将图片变成反相。4、在右侧的属性图层选项中,将这张图片设置为“颜色减淡”。5、点击上方任务栏的“滤镜”,再点击“其它,选择最...

CAD轴测图绘制流程及标注技巧

CAD轴测图绘制流程及标注技巧

这段时间刚好有个业务上的问题,客户的管道需要改造,如果不画这种轴测图可能就没办法了解业务会用到哪些材料问题,从没接触轴测图的我,这几天在网上找了些资料来看,整理了一份画轴测图的步骤。自己学了这个后还真的完全绘制了一份管道的轴测图给客户。▊CAD画轴测图的流程:1、设置等轴测捕捉模式输入命令“SE”(...

十六种抠图技巧

十六种抠图技巧

十六种抠图技巧:1、选框抠图按SHIFT键正方形绘制选区,按ALT键中心绘制选区,按SHIFT+ALT键中心等比绘制选区。按SHIFT加选,按ALT减选,按SHIFT+ALT交叉选取,按SHIFT+F6羽化,按空格SPACE移动选区。选区可以按右键进行变换,修改选区进入选择-修改(边界、平滑、扩展、...

淘宝发布产品要求

淘宝发布产品要求

电脑端描述(PC端)淘宝宝贝描述的图文要求如下:1、图片宽度≤750px,图片高度未限制(不建议太长,容易导致消费者打开页面卡顿)2、图片大小≤3mb,支持jpg、jpeg、png格式3、文字字数≤25000字4、源代码≤200000字符温馨提示:不要复制他人图片或是他人图片源代码编辑,务必在编辑页...

AI学习笔记 第二章 Adobe illustrator2020工具入门

AI学习笔记 第二章 Adobe illustrator2020工具入门

AI中常用快捷键汇总快捷键实现功能快捷键实现功能快捷键实现功能CTRL+K打开首选项CTRL+R显示标尺CTRL+F贴在前面CTRL+Z还原操作ALT+CTRL+R画板标尺CTRL+B贴在后面SHIFT+CTRL+Z重做CTRL+G编组(右键可取消编组)CTRL+]前移一层SHIFT+CTRL+V就...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。