js怎么实现图片滚动(js滚动图片怎么做)

http://www.itjxue.com  2023-02-21 13:51  来源:未知  点击次数: 

怎么用JS脚本使多张图片滚动?

推荐使用marquee实现图片滚动,示例:

marquee

scrolldelay="100"

direction="up"

onmouseover="this.stop()"

onmouseout="this.start()"img

src="xxxxxxx"/marquee

其中scrolldelay="100"

===指滚动延迟时间,单位是毫秒ms,默认为90ms

direction="up"

===指滚动方向,默认从左往右,可取的值为:up,down,left,right

onmouseover="this.stop()"

===指鼠标悬停在图片上时,图片静止

onmouseout="this.start()"

===指鼠标离开图片时,图片运动

希望对您有所帮助

怎样做js图片滚动的效果,越简单越好

首先准备以下的东西:

1、图片若干,并规范化图片名字。从1开始。

2、在存放图片的文档中新建一个txt。

3、在txt中输入内容。

4、txt后缀改为html,完成

txt的内容:

script

var i;

function pre()

{

if(i==1)return;

i--;

document.getElementById("pic").innerHTML="img src="+i+".jpg/img";

}

function next()

{

i++;

document.getElementById("pic").innerHTML="img src="+i+".jpg/img";

}

/script

body

div onclick="pre();"/div

div id="pic" /div

div onclick="next();"/div

/body

js特效里图片怎么不会滚动

js特效里图片不会滚动的原因是没有使用js里的定时器。根据查询相关资料信息,js特效里让图片无缝滚动就是要让图片集在一定时间里自动切换,需要js里的定时器来控制时间,没有使用定时器功能就无法实现图片滚动。js指JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

JS如何实现图片滑动?

script language="javascript" type="text/javascript"

//图片滚动展示 Start

var counts = 4;

//大图//

img1 = new Image();

img1.src = 'images/1.jpg';

img2 = new Image();

img2.src = 'images/2.jpg';

img3 = new Image();

img3.src = 'images/3.jpg';

img4 = new Image();

img4.src = 'images/4.jpg';

var smallImg = new Array();

//小图

smallImg[0] = 'images/index_adb1.gif';

smallImg[1] = 'images/index_adb2.gif';

smallImg[2] = 'images/index_adb3.gif';

smallImg[3] = 'images/index_adb4.gif';

//链接地址

url1 = new Image();

url1.src = ' ';

url2 = new Image();

url2.src = ' ';

url3 = new Image();

url3.src = ' ';

url4=new Image();

url4.src=' '

//alt值

alt1 = new Image();

alt1.alt = '';

alt2 = new Image();

alt2.alt = '';

alt3 = new Image();

alt3.alt = ' ';

alt4 = new Image();

alt4.alt='';

////欢迎来到标准之路.

var nn = 1;

var key = 0;

function change_img() {

if (key == 0) {

key = 1;

} else if (document.all) {

document.getElementById("pic").filters[0].Apply();

document.getElementById("pic").filters[0].Play(duration = 2);

}

eval('document.getElementById("pic").src=img' + nn + '.src');

eval('document.getElementById("url").href=url' + nn + '.src');

eval('document.getElementById("pic").alt=alt' + nn + '.alt');

if (nn == 1) {

document.getElementById("url").target = "_blank";

document.getElementById("url").style.cursor = "pointer";

} else {

document.getElementById("url").target = "_blank"

document.getElementById("url").style.cursor = "pointer"

}

for ( var i = 1; i = counts; i++) {

document.getElementById("xxjdjj" + i).className = 'axx';

}

document.getElementById("xxjdjj" + nn).className = 'bxx';

nn++;

if (nn counts) {

nn = 1;

}

tt = setTimeout('change_img()', 7000);

}

function changeimg(n) {

nn = n;

window.clearInterval(tt);

change_img();

}

function imageshow() {

document.write('div class="picshow_main"');

document.write('diva id="url"img id="pic" class="imgbig" //a/div');

document.write('div class="picshow_change"');

for ( var i = 0; i counts; i++) {

document.write('a href="javascript:changeimg(' + (i + 1)

+ ');" id="xxjdjj' + (i + 1)

+ '" class="axx" target="_self"img src="' + smallImg[i]

+ '"/a');

}

document.write('/div/div');

change_img();

}

//图片滚动展示 End

/script

script language="javascript" type="text/javascript"

imageshow();

/script

怎样用JS实现图片上下滚动

问的不是很清楚哦,上下是指从上到下,从下到上,上去了再下来,还是什么,

JS控件图片移动,无非常是setInterval,setTimeout来控件图片的位置,

示例代码:

img src="a.jpg" style="position:absolute; top:0px; left:40%;" id="movpic"

script

var obj = document.getElementById("movpic");

var tops=0;

function movs1()

{tops+=5;br/obj.style.top = tops;br/}

setInterval('movs1()',500);

/script

(责任编辑:IT教学网)

更多