編寫stylecss文件，代碼如下 margin0px textdecoration bodymargintop50px containerwidth600px height400px positionrelativeborder3px solid #333overflow hidden margin0 auto listwidth4200px height400px positionabsolute zindex1；在這個js文件里，changeimagesjs，用ctrl+F查找setTimeout或者setInterval，然后把找到的那個函數(shù)里的參數(shù)數(shù)字修改一下就能改變速度這個數(shù)字參數(shù)表示的是延遲時間，1000代表1秒，數(shù)字越小速度越快；lt！Luara圖片切換骨架end；圖片顯示區(qū)innerHTML=#39#39quot ltinput type=quotbuttonquot value=quot最后的晚餐quot onclick=quot圖片顯示區(qū)innerHTML=#39#39quot這是最容易看懂的方式了，但代碼有點臃腫，不方便維護，如果把按鈕內(nèi)容和圖片名存入數(shù)組或?qū)ο?，用函?shù)切換比較方便維護；可以寫成curIndex++ objsrc=arrcurIndex這就是切換的重點了，就是把數(shù)組里存的圖片鏈接換到上面取的obj對象 里 lt！id的引號都沒嗎，最好把這段img放在JS的上面；你說的很模糊，不過大概實現(xiàn)應(yīng)該是 方法之一兩個圖片的onclick函數(shù)都實現(xiàn)的是讓另一張顯示，自己消失這樣就可以了 function showid1，id2 documentgetElementByIdid1styledisplay=quotquotdocumentgetElementByIdid2styledisplay=quotblockquot 就這個思路；你這個需要給每張圖片定義一個編號，點擊剪頭切換圖片后，獲取切換后圖片的編號，用這個編號去刷新左邊縮略圖的排序 比如當(dāng)前顯示的大圖片的編號是20，那么，左邊縮略圖顯示的圖片就應(yīng)該是20+2，20+1，20+0，20+1，20+2結(jié)果就是顯示編號為18，19，20，21，22 這幾張圖片之。

6光靠div+css是無法實現(xiàn)的運用到了JavaScript技術(shù)，學(xué)習(xí)JavaScript要對html要有了解，學(xué)起來就不是特別的吃力，JavaScript屬于一種腳本語言，和java等編程語言比起來相對的好學(xué)在js文件中寫代碼使得html點擊圖片變成另一幅圖片？1準(zhǔn)備切換圖片素材，一般是兩張，如圖，放入img文件夾，跟HTML同級然后；在網(wǎng)頁設(shè)計中，實現(xiàn)點擊圖片漸變切換成另一個圖片的技巧主要是利用JavaScript和HTML的層疊樣式表CSS首先，需要在HTML文件中放置兩張圖片，并設(shè)置它們?yōu)閷盈B的關(guān)系接著，通過JavaScript實現(xiàn)鼠標(biāo)點擊事件的觸發(fā)當(dāng)用戶點擊圖片時，程序檢測到這一事件并執(zhí)行相應(yīng)的代碼關(guān)鍵步驟在于，通過JavaScript改變圖；這個應(yīng)該是鼠標(biāo)放上去圖片切換效果也就是說要兩張圖片切換需要在頁面中添加以下JS代碼 function changeImgobImg，sNewURL ifsNewURL！=quotquot obImgsrc=sNewURL 將需要切換圖片的標(biāo)簽代碼按照以下示例編寫，將以下代碼的quot圖片地址quot更換為自己所要切換的圖片就可以了。

0 idx + 1 設(shè)置 src thissrc = image_urlsidx 測試 alertthissrc 上面代碼只用了一個 img，點擊更換地址還是你想全部隱藏除當(dāng)前圖片，點擊后顯示下一張；count = 4 count = 0 setIntervalquotgoquot， 1000html代碼圖片一秒切換一次，arr配置需要切換的圖片，arr1配置對應(yīng)圖片的alt屬性，需要別的屬性自己再增加數(shù)組；先用 隱藏掉，切換的時候把路徑放上去 這樣寫的意思代表 頁面加載時同時載入圖片 這樣圖片就會緩存到本地 當(dāng)你再次使用圖片鏈接的時候，系統(tǒng)會直接調(diào)用本地的圖片，這樣就不會造成慢的現(xiàn)象了。

1HTML結(jié)構(gòu) 2javascript代碼 function changenifn5 n=1 一共5張圖片，所以循環(huán)替換documentgetElementByIdquottestquotsetAttributequotsrcquot， n+quotpngquotn++setTimeoutquotchangequot+n+quotquot，1000windowonload = functionsetTimeoutquotchange1quot， 1000 3效果；這是存在兩組圖片的一組小圖，一組大圖當(dāng)然了，如果有服務(wù)器端的程序支持，可以異步返回大圖一個簡單的講解 xianshidisplayblock yincangdisplay lt！第一張大圖 默認(rèn)為顯示。