1準(zhǔn)備切換圖片素材，一般是兩張，如圖，放入img文件夾，跟HTML同級(jí)2然后用img嵌入到網(wǎng)頁(yè)，嵌入其中的一張，另外一張待會(huì)切換3如圖，現(xiàn)在是靜態(tài)的，鼠標(biāo)放上去也不會(huì)產(chǎn)生切換反應(yīng)，因?yàn)闆](méi)有用JS4如圖，獲取im。

插入圖像對(duì)象鼠標(biāo)經(jīng)過(guò)圖像，在彈出的對(duì)話框中，選擇好“原始圖像”和“鼠標(biāo)經(jīng)過(guò)圖像”就行了。

2在indexhtml中的script標(biāo)簽中，填入js代碼setInterval#39$quotimgquotattrquotsrcquot， quotsmall3pngquot#39， 10003瀏覽器進(jìn)入indexhtml頁(yè)面中，此時(shí)顯示出一張圖片4過(guò)1秒后，圖片自動(dòng)切換為另一張圖片了。

做好是給圖片加以個(gè)lta標(biāo)簽，然后對(duì)lta標(biāo)簽設(shè)置hover 例如一個(gè)圖片ltimg src=#39examplejpg#39 width=#39100#39 height=#39100#39 alt=#39舉例#39 移上去的圖片叫hoverjpg 兩個(gè)圖片大小一樣 改寫(xiě)成 lta href=#39javascript#39。

cssquotdisplayquot，quotquot初始化隱藏全部的圖片$quot#img lieq0quotcssquotdisplayquot，quotblockquot只顯示第一個(gè)圖片$quot#num liquotmousemovefunction當(dāng)鼠標(biāo)經(jīng)過(guò)數(shù)字$quot#img liquotcssquotdisplayquot。

第一種把如下代碼加入ltbody區(qū)域中 ltbody onclick=Clicked ltSCRIPT lt！ transeffect = 0theeffects = new Array24theeffects0 = “盒狀收縮“theeffects1 = “盒狀向外“theeffects2 =。

原理hover觸發(fā)CSS臨近選擇器 所需工具DW用來(lái)給圖片畫(huà)熱區(qū)，PS算出彈出層的top和left偏移值我在Demo里畫(huà)了三個(gè)熱區(qū)位置如下圖，你用鼠標(biāo)懸停到上面即可看到效果源碼lt！DOCTYPE htmllthtml lang=quotenquot。

如果要每個(gè)單元格模塊不同背景的話，可以再定義幾個(gè)背景圖片樣式，然后給td調(diào)用所有代碼如下，已幫你修改測(cè)試成功lthtmlltheadlttitleindex_05_01lttitleltmeta。

你要問(wèn)的是html點(diǎn)擊左右箭頭可以切換圖片嗎，可以根據(jù)html軟件資料，在頁(yè)面中實(shí)現(xiàn)的一個(gè)點(diǎn)擊可以進(jìn)行切換圖片，點(diǎn)擊左右兩邊箭頭就能實(shí)現(xiàn)超文本標(biāo)記語(yǔ)言，標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用，html不是一種編程語(yǔ)言，而是一種標(biāo)記。

做好準(zhǔn)備工作，把兩張100px X 100px的圖片合成 100 X 200 的通過(guò)CSS圖片定位來(lái)達(dá)到切換效果存放在根目錄 img\tupiangif ltstyle div_1width100pxheight100pxmargin0padding0 定義一個(gè)DIV方框 div_。

2在indexhtml中的ltscript標(biāo)簽中，輸入js代碼#39a#39hoverfunction $#39img#39css#39display#39， #39block#393瀏覽器運(yùn)行indexhtml頁(yè)面，此時(shí)鼠標(biāo)移動(dòng)到超鏈接上，下面的圖片自動(dòng)顯示了出來(lái)。

對(duì)用JS的鼠標(biāo)事件，onmouseover方法，當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽的時(shí)候把那個(gè)圖片的display，變成block，只要按照這個(gè)步驟走就可以做到的。

quot onmouseout=quotdisquot ltdiv class=quots1quot id=quots1quotltimg src=quotbigbmpquotltdiv 要是想彈出文字介紹 把s1里面的img換成字就行了，或者簡(jiǎn)單點(diǎn)就在第一個(gè)img上加一個(gè)alt的屬性，鼠標(biāo)放在上邊也有顯示。

\x0d\x0avar curIndex=0\x0d\x0a時(shí)間間隔單位毫秒，每秒鐘顯示一張，數(shù)組共有5張圖片放在Photos文件夾下\x0d\x0avar timeInterval=1000\x0d\x0avar arr=new Array\x0d\x0aarr0=quotphoto。

那個(gè)透明的盒子是單獨(dú)寫(xiě)的，寫(xiě)好后，使用絕對(duì)定位將其移到圖片盒子區(qū)域外比如說(shuō)left9999px，圖片要求使用overflowhidden，這樣剛開(kāi)始的時(shí)候就看不見(jiàn)文字，然后給圖片添加hover偽類(lèi)，改成你需要定位的值，鼠標(biāo)移上去。

鼠標(biāo)移動(dòng)到盒子內(nèi)變綠，移出變藍(lán)ltpltp如果想讓圖片變色，可以把圖片做成具有一定透明度的圖片，改變背景顏色ltpltdivltscript type=quottextjavascriptquotfunction ToReddocumentgetElementById#39image#39style。

兩張圖片放到一個(gè)div里面，一個(gè)顯示 一個(gè)隱藏ltdiv class=quotimglistquotltimg class=quotshowquot src=quotajpgquotltimg class=quothiddenquot src=quotbjpgquotltdivltstyleimglist showdisplayblockimglist hidden。