上下左右连续滚动图片的js代码（js图片循环滚动代码）

本文目录一览：

1、js实现图片滚动效果
2、网页制作：JavaScript图片上下滚动的导航
3、怎样在网页中让图片连续滚动，在什么地方怎么加代码？
4、js实现图片左右滚动
5、网页中的滚动图片的代码怎么写？

js实现图片滚动效果

SCRIPT language="JavaScript"

var speed=50; //设置滚动速度

demo2.innerHTML=demo1.innerHTML //复制dome1为dome2

function Marquee(){

if(demo2.offsetTop-demo.scrollTop=0) //当滚动至dome1与dome2交界时

demo.scrollTop-=demo1.offsetHeight //dome跳到最顶端

else{

demo.scrollTop++

}

var MyMar=setInterval(Marquee,speed) //设置定时器

demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器，继续滚动

/SCRIPT

div id="demo" style="overflow: hidden; height: 600; width: 180; background: #214984; color: #ffffff"

div id="demo1" align="center"

!-- 定义图片 --

/div

div id="demo2" align="center"/div

/div

网页制作：JavaScript图片上下滚动的导航

我有个左右滚动的js图片,不知道能不能,不过我估计你改改就行了

scrollpic.js内容如下:

//滚动图片构造函数

//UIUE Dept. mengjia

//080623

index.asp中高用js的代码如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" /

meta name="description" content="此代码内容为JS动态可控制左右滚动的图片...，属于站长常用代码，更多图片特效代码请访问懒人图库JS代码频道。" /

titleJS动态可控制左右滚动的图片..._懒人图库/title

link href="css/css.css" rel="stylesheet" type="text/css"

SCRIPT src="js/ScrollPic.js" type=text/javascript/SCRIPT

/head

body

div align="center"

!--滚动图片 start--

DIV class=rollphotos

DIV class=FixTitle

H3开幕式回顾/H3SPANA href="" target=_blank更多/A/SPAN/DIV

DIV class=blk_29

DIV class=LeftBotton id=LeftArr/DIV

DIV class=Cont id=ISL_Cont_1!-- 图片列表 begin --

DIV class=boxA class=imgBorder href="" target=_blankIMG height=84 alt="懒人图库" src="images/U2716P6T64D51897F1328DT20080906234338.jpg" width=124

border=0/A

PA href=""

target=_blank开幕式火炬传递/A/P/DIV

DIV class=boxA class=imgBorder href="" target=_blankIMG height=84 alt="懒人图库" src="images/U2716P6T64D51897F1322DT20080906204943.jpg" width=124

border=0/A

PA href=""

target=_blank开幕式精彩瞬间/A/P/DIV

DIV class=boxA class=imgBorder href="" target=_blankIMG height=84 alt="懒人图库" src="images/U2716P6T64D51897F1323DT20080906204943.jpg" width=124

border=0/A

PA href=""

target=_blank卡通玩偶组成会徽/A/P/DIV

DIV class=boxA class=imgBorder href="" target=_blankIMG height=84 alt="懒人图库" src="images/U2716P6T64D51897F1324DT20080906205503.jpg" width=124

border=0/A

PA href=""

target=_blank开幕式焰火表演/A/P/DIV

DIV class=boxA class=imgBorder href="" target=_blankIMG height=84 alt="懒人图库" src="images/U2716P6T64D51897F1327DT20080906220904.jpg" width=124

border=0/A

PA href=""

target=_blank中国代表团入场/A/P/DIV

DIV class=boxA class=imgBorder href="" target=_blankIMG height=84 alt="懒人图库" src="images/U2716P6T64D51897F1325DT20080906205624.jpg" width=124

border=0/A

PA href=""

target=_blank各代表团入场/A/P/DIV

DIV class=boxA class=imgBorder href="" target=_blankIMG height=84 alt="懒人图库" src="images/U2716P6T64D51897F1094DT20080906194732.jpg" width=124

border=0/A

PA href=""

target=_blank开幕式暖场表演/A/P/DIV

DIV class=boxA class=imgBorder href="" target=_blankIMG height=84 alt="懒人图库" src="images/U2716P6T64D51897F1091DT20080906180505.jpg" width=124

border=0/A

PA href=""

target=_blank开幕式即将举行/A/P/DIV!-- 图片列表 end --/DIV

DIV class=RightBotton id=RightArr/DIV/DIV

SCRIPT language=javascript type=text/javascript

!--//--![CDATA[//!--

var scrollPic_02 = new ScrollPic();

scrollPic_02.scrollContId = "ISL_Cont_1"; //内容容器ID

scrollPic_02.arrLeftId = "LeftArr";//左箭头ID

scrollPic_02.arrRightId = "RightArr"; //右箭头ID

scrollPic_02.frameWidth = 908;//显示框宽度

scrollPic_02.pageWidth = 152; //翻页宽度

scrollPic_02.speed = 10; //移动速度(单位毫秒，越小越快)

scrollPic_02.space = 10; //每次移动像素(单位px，越大越快)

scrollPic_02.autoPlay = false; //自动播放

scrollPic_02.autoPlayTime = 3; //自动播放间隔时间(秒)

scrollPic_02.initialize(); //初始化

//--!]]

/SCRIPT

/DIV

!--滚动图片 end--

来源：a href="" target="_blank"新浪网/a 代码整理：a href="" target="_blank"懒人图库/a

p＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。/p

p/p

/div

/body

/html

实在不行的话,我给你一个网站,你从这个网站上找吧

打开你在上面找js项,打开就有好多种图片滚动的特效,挺好的,你去看看吧

怎样在网页中让图片连续滚动，在什么地方怎么加代码？

可以用JavaScript

脚本和marquee标签做，JavaScript还可以在同一区域让图片隔几秒轮换显示的效果，

用marquee

directon="left"

scrollamount="3"

onmouseove=this.stop()

onmoseout=this.start()

marquee

图片内容

/marquee

属性：

directon，滚动方向；scrollamount，滚动速度(值越大速度越快);

onmouseove=this.stop()

,鼠标附上去时停止运动；onmoseout=this.start()，鼠标离开时开始运动；其它属性可以自己再加。。。

JavaScript你自己到其它网站找吧。。。你没学过的话看不懂的，直接拷贝用上就行了，

js实现图片左右滚动

代码：

title/title

style

body{

margin:0;

padding:0;

background-color:transparent;

}

div{

width:350px;

overflow:hidden;

}

table img{

width:100px;

height:100px;

}

/style

/head

body

div id="picScroll"

table

tdaimg src="../pic/1.jpg" //a/td

tdaimg src="../pic/2.jpg"/a/td

tdaimg src="../pic/3.jpg"/a/td

tdaimg src="../pic/4.jpg"/a/td

tdaimg src="../pic/5.jpg"/a/td

/tr

/table

/div

/body

/html

script

var target = $('#picScroll');

var left = 0;

var speed = 30;

function Marqeen() {

if (target[0].offsetWidth = left) {

left -= target[0].offsetWidth;

}

else {

left++;

}

target.scrollLeft(left);

}

$(function () {

var marQueen = window.setInterval(Marqeen, speed);

target.mouseover(function () {

clearInterval(marQueen);

});

target.mouseout(function () {

marQueen = window.setInterval(Marqeen, speed);

});

/script

网页中的滚动图片的代码怎么写？

网页中的滚动图片的代码有上下左右四个方向，分别是：

head

-----

/head

body

！--向上滚动代码开始--

div id="colee" style="overflow:hidden;height:253px;width:410px;"

div id="colee1"

pimg src=""/p

/div

div id="colee2"/div

/div

script

var speed=30;

var colee2=document.getElementById("colee2");

var colee1=document.getElementById("colee1");

var colee=document.getElementById("colee");

colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2

function Marquee1(){

//当滚动至colee1与colee2交界时

if(colee2.offsetTop-colee.scrollTop=0){

colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端

}else{

colee.scrollTop++

}

var MyMar1=setInterval(Marquee1,speed)//设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

colee.onmouseover=function() {clearInterval(MyMar1)}

//鼠标移开时重设定时器

colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}

/script

!--向上滚动代码结束--

!--下面是向下滚动代码--

div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"

div id="colee_bottom1"

pimg src="/jscss/demoimg/200907/bg3.jpg"/p

/div

div id="colee_bottom2"/div

/div

script

var speed=30

var colee_bottom2=document.getElementById("colee_bottom2");

var colee_bottom1=document.getElementById("colee_bottom1");

var colee_bottom=document.getElementById("colee_bottom");

colee_bottom2.innerHTML=colee_bottom1.innerHTML

colee_bottom.scrollTop=colee_bottom.scrollHeight

function Marquee2(){

if(colee_bottom1.offsetTop-colee_bottom.scrollTop=0)

colee_bottom.scrollTop+=colee_bottom2.offsetHeight

else{

colee_bottom.scrollTop--

}

var MyMar2=setInterval(Marquee2,speed)

colee_bottom.onmouseover=function() {clearInterval(MyMar2)}

colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}

/script

!--向下滚动代码结束--

div id="colee_left" style="overflow:hidden;width:500px;"

table cellpadding="0" cellspacing="0" border="0"

trtd id="colee_left1" valign="top" align="center"

table cellpadding="2" cellspacing="0" border="0"

tr align="center"

tdpimg src="/jscss/demoimg/200907/bg3.jpg"/p/td

/tr

/table

/td

td id="colee_left2" valign="top"/td

/tr

/table

/div

script

//使用div时，请保证colee_left2与colee_left1是在同一行上.

var speed=30//速度数值越大速度越慢

var colee_left2=document.getElementById("colee_left2");

var colee_left1=document.getElementById("colee_left1");

var colee_left=document.getElementById("colee_left");

colee_left2.innerHTML=colee_left1.innerHTML

function Marquee3(){

if(colee_left2.offsetWidth-colee_left.scrollLeft=0)//offsetWidth 是对象的可见宽度

colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度

else{

colee_left.scrollLeft++

}

var MyMar3=setInterval(Marquee3,speed)

colee_left.onmouseover=function() {clearInterval(MyMar3)}

colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

/script

!--向左滚动代码结束--

!--下面是向右滚动代码--

div id="colee_right" style="overflow:hidden;width:500px;"

table cellpadding="0" cellspacing="0" border="0"

trtd id="colee_right1" valign="top" align="center"

table cellpadding="2" cellspacing="0" border="0"

tr align="center"

tdpimg src="/jscss/demoimg/200907/bg3.jpg"/p/td

/tr

/table

/td

td id="colee_right2" valign="top"/td

/tr

/table

/div

script

var speed=30//速度数值越大速度越慢

var colee_right2=document.getElementById("colee_right2");

var colee_right1=document.getElementById("colee_right1");

var colee_right=document.getElementById("colee_right");

colee_right2.innerHTML=colee_right1.innerHTML

function Marquee4(){

if(colee_right.scrollLeft=0)

colee_right.scrollLeft+=colee_right2.offsetWidth

else{

colee_right.scrollLeft--

}

var MyMar4=setInterval(Marquee4,speed)

colee_right.onmouseover=function() {clearInterval(MyMar4)}

colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}

/script

!--向右滚动代码结束--

扩展资料：

代码就是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。源代码是代码的分支，某种意义上来说，源代码相当于代码。

现代程序语言中，源代码可以书籍或磁带形式出现，但最为常用格式是文本文件，这种典型格式的目的是为了编译出计算机程序。计算机源代码最终目的是将人类可读文本翻译成为计算机可执行的二进制指令，这种过程叫编译，它由通过编译器完成。

源代码（也称源程序），是指一系列人类可读的计算机语言指令。

源代码是相对目标代码和可执行代码而言的。源代码就是用汇编语言和高级语言写出来的地代码。目标代码是指源代码经过编译程序产生的能被cpu直接识别二进制代码。可执行代码就是将目标代码连接后形成的可执行文件，当然也是二进制的。

在现代程序语言中，源代码可以是以书籍或者磁带的形式出现，但最为常用的格式是文本文件，这种典型格式的目的是为了编译出计算机程序。计算机源代码的最终目的是将人类可读的文本翻译成为计算机可以执行的二进制指令，这种过程叫做编译，通过编译器完成。

参考资料：百度百科-计算机代码