假設(shè)用來顯示圓點(diǎn)div的class是point，圖片區(qū)域的大小是10*10px的，然后那個(gè)圖片的文件名是point_picgif那么html的代碼大致上可以寫成下面這樣 在css里面的定義可以是這樣point width10px height10px backgroundurlpoint_picgif 0 0 norepeat pointhover background0 10px。

這類開發(fā)通常可以通過JavaScript或CSS實(shí)現(xiàn)比如，你可以為每個(gè)名字添加一個(gè)點(diǎn)擊事件，當(dāng)點(diǎn)擊名字時(shí)，通過改變背景圖片或其他方式來實(shí)現(xiàn)圖片的變換這種技術(shù)在響應(yīng)式設(shè)計(jì)中尤其有用，可以提升用戶體驗(yàn)，使網(wǎng)站更加生動(dòng)使用焦點(diǎn)圖也是一種有效的方法你可以設(shè)置焦點(diǎn)圖的切換邏輯，使得點(diǎn)擊名字時(shí)，焦點(diǎn)圖自動(dòng)。

在網(wǎng)頁插入div很簡單，就是寫這樣一對標(biāo)記，就在網(wǎng)頁里建立了一個(gè)div，不過這是默認(rèn)的格式，css就是來為這個(gè)div設(shè)置各種外觀，比如長度高度邊框等等，所以你要是在一個(gè)已經(jīng)建好的不是div+css布局的網(wǎng)頁上添加div，如果這個(gè)網(wǎng)頁元素不多，還不麻煩主要是要會(huì)一點(diǎn)csscss比較簡單，比js簡單多了。

好多種類型的 ，今天給你寫一下最簡單的 1234 的 焦點(diǎn)圖切換2首先電腦上 ps處理好 470PX * 150px的圖片三四張為了方便觀看效果最好三張以上處理完成后 如下圖 放在同一個(gè)文件夾中 3電腦上安裝好 Dreamweaver 軟件 編寫代碼的我這里用的 DW cs55 4打開后開始編寫代碼 我。

這是JS焦點(diǎn)圖切換代碼，需要寫jscss等代碼，如果你是新手，建議你用網(wǎng)絡(luò)上的吧，同樣也是不錯(cuò)的。

在css里寫 container width 800pxmargin 0 auto 就把寬設(shè)置成800px，并居中了。

純JS+HTML+CSS制作出的幻燈片效果 代碼簡單，思路講解也很清晰，有詳細(xì)demo示例 details53。

另存為下列代碼試試吧，應(yīng)該還有樣式文件css吧 lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot 無標(biāo)題文檔 var n=0function Meavalue n=valuesetBgvalueplaysvalueconausn f。

焦點(diǎn)圖輪播我建議你使用插件，SuperSlide插件layer插件swiper插件，都可以滿足你的要求，最主要的是使用簡單，兼容性也好。

bleucss中的slide段slide會(huì)不起作用可把此段main colleftslide中和它外層盒子的內(nèi)容根據(jù)需要放到你自己的盒子中2會(huì)出現(xiàn)本想要3個(gè)圖片，卻出現(xiàn)6個(gè)圖片后三個(gè)空白的現(xiàn)象，是因?yàn)榻裹c(diǎn)圖沖突，你的html文件中出現(xiàn)了相同一兩個(gè)幻燈片盒子取消一個(gè)或重新設(shè)置另一個(gè)。