上下左右連續滾動圖片的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直接識別二進制代碼。可執行代碼就是將目標代碼連接後形成的可執行文件，當然也是二進制的。

在現代程序語言中，源代碼可以是以書籍或者磁帶的形式出現，但最為常用的格式是文本文件，這種典型格式的目的是為了編譯出計算機程序。計算機源代碼的最終目的是將人類可讀的文本翻譯成為計算機可以執行的二進制指令，這種過程叫做編譯，通過編譯器完成。

參考資料：百度百科-計算機代碼

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/309032.html

上下左右連續滾動圖片的js代碼（js圖片循環滾動代碼）

本文目錄一覽：

js實現圖片滾動效果

網頁製作：JavaScript圖片上下滾動的導航

怎樣在網頁中讓圖片連續滾動，在什麼地方怎麼加代碼？

js實現圖片左右滾動

網頁中的滾動圖片的代碼怎麼寫？

相關推薦

發表回復