html怎么设置滚动图片?

html-css015

html怎么设置滚动图片?,第1张

方案一:直接使用HTML的滚动标签 marquee ,把图片放入滚滚标签内部,代码如下:

<marquee>

<img src='1.jpg'>

<img src='2.jpg'>

<img src='3.jpg'>

<img src='4.jpg'>

</marquee>

方案二:使用第三方插件,比如swiper.js,

插件

<MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><IMG src="第一张图片地址" ><IMG src="第二张图片地址"></MARQUEE>

注释:

1) scrollAmount。它表示速度,值越大速度越快。

2) 加入onmouseover=stop() onmouseout=start()代码,鼠标指向循环文字图片时他们会停止滚动,鼠标离开时继续滚动。

给滚动图片加超链接

用<a href=>和</a>把<img>包围,并且img必须设border=0,否则图片会出现边框。例子如下:

<MARQUEE scrollAmount=3 loop=infinite deplay="0"><a href="链接网址"><img src="图片网址" border=0></a></MARQUEE>

图片从右到左滚动

<MARQUEE width=宽 height=高 onmouseover=stop() onmouseout=start() scrollAmount=速度 loop=infinite deplay="0"><img src="图片地址 "><img src="图片地址 ">···</MARQUEE>

图片从下到上滚动

<marquee behavior="scroll" direction=up width="宽" height="高" scrollamount="5" onmouseout="this.start()"><img src="图片网址 "><img src="图片网址 ">···</marquee>

带有超链接的图片实现滚动效果

<marquee behavior="scroll" direction=up width="120" height="60" scrollamount="1" scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()"><a target="cont" href="连接地址"><img src="http://图片地址" idth="88" height="33" border="0"></a><a target="cont" href="连接地址"><img src="图片地址" width="88" height="33" border="0"></a></marquee>

marquee>滚动文字

滚动文字

滚动文字

滚动文字

marquee

参数:

bgcolor:滚动文本框的背景颜色。

direction:滚动方向设置,可选择left、right、up和down。

scrolldelay:每轮滚动之间的延迟时间,越大越慢。

scrollamount:一次滚动总的时间量,数字越小滚动越慢。

behaviour:滚动的方式设置,三种取值:scroll(循环滚动)

lide(单次滚动)、alternate(来回滚动)。

align:文字的对齐方式设置。可选择middle(居中)、bottom(居下)还是top(居上)。

width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in

pixels(按像素)或是in

percent(按百分比)。

height:滚动文本框的高度,输入一个数值后从后面的单选框选择in

pixels(按像素)或是in

percent(按百分比)。

loop:滚动次数。默认为infinite

hspace、vspace:前后、上下的空行。

下面这须代码是坚着滚动代码.

怎么可以改成让它横着滚动呢?

var

t=fffhoridiv.scrolltop

fffhoridiv2.innerhtml=fffhoridiv1.innerhtml

function

fffhorimarquee(){

if(fffhoridiv1.offsetheight

-fffhoridiv.scrolltop

<=2)

fffhoridiv.scrolltop

-=

fffhoridiv1.offsetheight

else

fffhoridiv.scrolltop

++

}

function

fffstarthorimarquee(){

fffhoritime

=

setinterval(fffhorimarquee,30)

}

function

fffstophorimarquee(){

clearinterval(fffhoritime)

}

fffstarthorimarquee()

//开始滚动

</script>

要给分哦