本文目錄一覽：
- 1、如何用原生js和css製作輪播圖
- 2、css+js做圖文幻燈片思路
- 3、用HTML+CSS+JS製作出幻燈片效果
- 4、如何使用js來控制圖片的css樣式？
- 5、如何用css、js把一張圖片上的圖案製作成動畫
如何用原生js和css製作輪播圖
曾經插件不太流行我就自己寫，這個問題我來回答你，原生你需要對CSS跟JS都比較熟練，才能去製作，先用CSS排版出你需要的界面，之後才能去寫JS。
JS部分你要取出你的輪播圖個數，然後定義一個切換到單前的變量，再定義切換效果，切到最後一張圖片了要如何處理，切換都第一張用戶點擊上一站又要如何處理。當你這些都處理好了之後，一個頁面多個輪播等等，JS兼容頁面兼容又得處理吧，我就問你頭痛不。
現在使用框架這些通通都不用自己管，高效輕鬆他不好嗎？
css+js做圖文幻燈片思路
循環圖片和按鈕 都加上索引
然後給每個按鈕加上事件
也就是說當點擊第幾個按鈕就顯示第幾張圖片。
用HTML+CSS+JS製作出幻燈片效果
純JS+HTML+CSS製作出的幻燈片效果
代碼簡單，思路講解也很清晰，有詳細demo示例
如何使用js來控制圖片的css樣式？
這個可以用CSS實現就好了。不必要使用JS
圖片放大效果的話，建議用一個額外的 div層放置放大後的圖片，這樣布局就不會亂了。鼠標放上去就顯示這個層。
.img2{
/*這裡寫你的所有圖片都會用到的樣式*/
}
.img2:first-child, .img2:last-child{
/*這裡寫第一個圖片和最後一個圖片會用到的樣式*/
}
.img1:hover .showBigImg{
display:block;
}
對於這個大圖的div層的顯示，可以稍加js控制，這樣就可以所有圖片共用一個div層來放置大圖。
希望能幫助到你
如何用css、js把一張圖片上的圖案製作成動畫
把你的圖片按1、2、3。。。的順序命名 以便用循環調用 具體js可用setInterval函數
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/280790.html
微信掃一掃 
支付寶掃一掃 