方案一:直接使用HTML的滚动标签 marquee ,把图片放入滚滚标签内部,代码如下:
<marquee>
<img src='1.jpg'>
<img src='2.jpg'>
<img src='3.jpg'>
<img src='4.jpg'>
</marquee>
方案二:使用第三方插件,比如swiper.js,
插件
html网页图片滚动方法如下:1把图片样式的position属性设置为static,
2然后指定固定的位置,就可以了。
tml网页图片居中方法如下:
第一种方法:
设置父元素内文字居中即可让图片居中。
element{ text-align:center}
第二种方法:
设置图片为块级元素,设置左右margin为auto即可让图片居中。
img{ display:blockmargin-left:automargin-right:auto}
调用“图片”栏目图片的向左滚动代码(效果演示)
以下是首页模板最新图片部分代码
-----------------------------------
<tr>
<td
class=main_title_575><B>最新图片</B></td>
</tr>
<tr>
<td
class=main_tdbg_575
vAlign=center
align=middle
height=131>
<!--{$GetPicPhoto(3,0,True,0,4,False,False,0,1,1,130,90,20,0,True,4)}-->
</td>
</tr>
------------------------------------
<!--滚动代码开始-->
<div
id=demo
style="OVERFLOW:
hidden
WIDTH:
560px
HEIGHT:
120px">
<table
cellPadding=0
align=left
border=0
cellspace="0">
<tr>
<td
id=demo11
vAlign=top>
<!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--></td>
<td
id=demo12
vAlign=top></td>
</tr>
</table>
</div>
<SCRIPT>
var
speed=15
demo12.innerHTML=demo11.innerHTML
function
Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var
MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function()
{clearInterval(MyMar1)}
demo.onmouseout=function()
{MyMar1=setInterval(Marquee11,speed)}
</SCRIPT>
<!--滚动代码结束-->
-----------------------------------
注意滚动图片数不要太大,这会影响页面下载速度。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)