怎樣用javascript實(shí)現(xiàn)圖片定時(shí)切換

思路：使用javascript定時(shí)器函數(shù)setTimeout()每隔一定的毫秒間隔數(shù)執(zhí)行動(dòng)作，在執(zhí)行的動(dòng)作中循環(huán)替換圖片的src屬性。樹立演示如下：

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的凌云網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

1、HTML結(jié)構(gòu)

img?src="1.png"?id="test"

2、javascript代碼

function?change(n){

if(n5)?n=1;??//?一共5張圖片，所以循環(huán)替換

document.getElementById("test").setAttribute("src",?n+".png");

n++;

setTimeout("change("+n+")",1000);

}

window.onload?=?function(){

setTimeout("change(1)",?1000);

}

3、效果演示

JavaScript 畫圖

$('#reset').click(function(){//重置

$('img').css({"left":"0","top":"100px"});

});

$('#left').click(function(){//左

$('img').animate({

left:"-=10",

},500);

});

$('#right').click(function(){//右

$('img').animate({

left:"+=10",

},500);

});

$('#up').click(function(){//上

$('img').animate({

top:"-=10",

},500);

});

$('#down').click(function(){//下

$('img').animate({

top:"+=10",

},500);

});

給圖加上想對(duì)定位

JavaScript單擊圖片,圖片以動(dòng)畫形式放大為原來(lái)的1.5倍,動(dòng)畫時(shí)間為3秒怎么做

1、點(diǎn)擊JavaScript圖片。

2、通過(guò)點(diǎn)擊之中換成img的src屬性。

3、換成屬性之后，將圖片設(shè)置成動(dòng)畫形式放大原來(lái)的1.5倍。

4、在設(shè)置中找到動(dòng)畫時(shí)間，將動(dòng)畫時(shí)間設(shè)為3秒即可。

javascript如何畫圖形？

這個(gè)問(wèn)題你用baidu搜索一下，有很多的教程。。

;cl=3

1.

JAVASCRIPT經(jīng)常通過(guò)用戶提供的數(shù)據(jù)動(dòng)態(tài)地生成條形圖。總的來(lái)說(shuō)這是由于條形圖的簡(jiǎn)潔，它只是簡(jiǎn)單地由不確定長(zhǎng)度的圖形組成。我們使用JAVASCRIPT動(dòng)態(tài)地畫出每個(gè)圖形，每個(gè)圖形的長(zhǎng)度和用戶輸入的數(shù)據(jù)有關(guān)。

我們需要的是以一個(gè)1x15的圖形作為開始：

如果我想要拉長(zhǎng)這幅圖象到 50x15 ，我使用 JavaScript 這樣做：

script

document.write(img src="poll.gif" width="50" height="15"')

/script

這就形成了動(dòng)態(tài)圖形的基礎(chǔ)。這是一個(gè)我用JAVASCRIPT寫的一個(gè)簡(jiǎn)單的腳本，它用來(lái)說(shuō)明了圖形創(chuàng)建的例子。

script

var graphtext=new Array("Jill", "Bob", "Tony") //圖形項(xiàng)目

var graphvalue=new Array("60", "45", "95") //圖形值 (使用的是百分比，例如70=70%)

var barlength=200

for (i=0;igraphtext.length;i++)

document.write (graphtext[i]+': img src="poll.gif" width="'+graphvalue[i]/100*barlength+'" height="15"br')

/script

Jill:

Bob:

Tony

代碼的關(guān)鍵之處在于：width="'+graphvalue[i]/100*barlength+'"

這句話產(chǎn)生圖形的寬度，這基于用戶提供的數(shù)據(jù)。每個(gè)長(zhǎng)度是輸入值的百分比，然后乘以條形長(zhǎng)度的基本長(zhǎng)度。

2.

使用圖形信息建立原始數(shù)據(jù)的圖形。只給復(fù)雜圖形的名稱賦予一定的值（值可以是絕對(duì)值或百分比），剩下的留給腳本就行了。

圖形信息允許你在同一個(gè)網(wǎng)頁(yè)上生成不止一個(gè)圖形文件，而這只需要多次的調(diào)用關(guān)鍵的函數(shù)。

Example:

Example 1 (using absolute values)

What is your favorite news site?

CNN

28%

MSNBC

36%

ABC News

11%

BBC News

25%

Total participants: 211

Example 2 (using percentage values)

What is your favorite news site?

CNN

28%

MSNBC

36%

ABC News

11%

BBC News

25%

因?yàn)镋XAMPLE 1是用絕對(duì)值來(lái)創(chuàng)建的，腳本也在最后顯示了總值。

指導(dǎo)

步驟一：下面是圖形信息的兩個(gè)版本。第一個(gè)要求圖形值是絕對(duì)值，而第二個(gè)是相對(duì)值。

絕對(duì)方式：

What is your favorite news site?

script language="JavaScript1.2"

//JavaScript Graph-it! (Absolute)- by javascriptkit.com

//Visit JavaScript Kit () for script

//Credit must stay intact for use

var graphimage="poll.gif"

//DEFINE GRAPH VALUES [Item name, absolute value]

var graphx=new Array()

graphx[0]=["CNN",60]

graphx[1]=["MSNBC",75]

graphx[2]=["ABC News",24]

graphx[3]=["BBC News",52]

//YOU CAN DEFINE MULTIPLE GRAPHS, eg:

//var graphy=new Array()

function graphit(g,gwidth){

total=0

for (i=0;ig.length;i++)

total+=parseInt(g[i][1])

output='table border="0" cellspacing="0" cellpadding="0"'

for (i=0;ig.length;i++){

calpercentage=Math.round(g[i][1]*100/total)

calwidth=Math.round(gwidth*(calpercentage/100))

output+='trtd'+g[i][0]+'?/tdtdimg src="'+graphimage+'" width="'+calwidth+'" height="10" '+calpercentage+'%/td/tr'

}

output+='/table'

document.write(output+'brTotal participants: b'+total+'/b')

}

//CALL GRAPHIT FUNCTION

//graphit(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)

graphit(graphx,200)

/script

p align="center"font face="arial" size="-2"This free script provided by/fontbr

font face="arial, helvetica" size="-2"a href=""JavaScript

Kit/a/font/p

相對(duì)方式：

What is your favorite news site?

script language="JavaScript1.2"

//JavaScript Graph-it! (Percentage)- by javascriptkit.com

//Visit JavaScript Kit () for script

//Credit must stay intact for use

var graphimageP="poll.gif"

//DEFINE GRAPH VALUES [Item name, Percentage value]

var graphv=new Array()

graphv[0]=["CNN","28%"]

graphv[1]=["MSNBC","36%"]

graphv[2]=["ABC News","11%"]

graphv[3]=["BBC News","25%"]

//YOU CAN DEFINE MULTIPLE GRAPHS, eg:

//var graphz=new Array()

function graphitP(g,gwidth){

outputP='table border="0" cellspacing="0" cellpadding="0"'

for (i=0;ig.length;i++){

calwidthP=gwidth*(parseInt(g[i][1])/100)

outputP+='trtd'+g[i][0]+'?/tdtdimg src="'+graphimageP+'" width="'+calwidthP+'" height="10" '+g[i][1]+'/td/tr'

}

outputP+='/table'

document.write(outputP)

}

//CALL GRAPHIT FUNCTION

//graphitP(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)

graphitP(graphv,200)

/script

p align="center"font face="arial" size="-2"This free script provided by/fontbr

font face="arial, helvetica" size="-2"a href=""JavaScript

Kit/a/font/p

以上回答你滿意么？

網(wǎng)站題目：javascript圖,javascript圖片自動(dòng)切換
網(wǎng)頁(yè)鏈接：http://www.rwnh.cn/article24/dsdhece.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、軟件開發(fā)、App設(shè)計(jì)、網(wǎng)站排名、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)