旺铺自定义内容页如何实现图片轮播
在这里分享一下左右滚动图片并且带多个链接的源代码:
<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