響應式圖片切換代碼

『壹』 求類似於淘寶產品詳情頁面大圖下面多個小圖然後點擊左右箭頭可以換圖片的那種效果的CSS或JS代碼

http://down.admin5.com/texiao/flash/這里有很多的。我這倆天正好做的個那·~但是JS有沖突，希內望到時候你也幫容我

『貳』 如何使用HTML5的picture元素處理響應式圖片

讓我們先了解一下問題
固定寬度，像素完美的網站設計已經離我們遠去了。在寬屏顯示器，互聯網電視，多尺寸的平板電腦和智能手機的今天，我們的設計必須應付一切可能，將寬由320px向7680px轉變。
伴隨這種多解析度風景而至的，是需要拉伸或收縮圖像，以適應這些不同的要求。這可以被理解為如下問題，矢量圖形出現異常時，絕大多數具有特定像素的圖像寬度並不改變。
所以，我們應該怎麼做呢?
目前最常見的解決方案
作為一般規則，你會在任何響應式網站中發現以下CSS樣式:
1
img {
2
max-width: 100%;
3
height: auto;
4
}
此代碼使用max-width:100%的設置，以確保圖像永遠不會超越其父容器的寬度。如果父容器的寬度收縮小於圖像的寬度，圖像將隨之縮小。height:auto的設置可以確保當有這種情況發生時，圖像將以自身的寬高比保留。
這解決了一方面的問題，使我們能夠在許多不同的情況下顯示相同的圖像。不過，這並不能讓我們對不同的情況指定不同的圖像。
#p#副標題#e#
新的解決方案：
是HTML5一個新的元素。
如果元素與當前的和
它可以讓你根據以下條件載入完全不同的圖像：
媒體特性結果如：視口的當前高度(viewport height)，寬度(width)，方向(orientation)。
像素密度
反過來這也意味著您可以：
載入適當大小圖像的文件，使可用帶寬得到充分利用。
載入不同裁剪並具有不同縱橫比的圖像，以適合於不同寬度的布局變化。
載入更高的像素密度，顯示更高解析度的圖像。
的工作原理
基本工作步驟如下：
創建標簽。
在這些標簽內創建一個你想用來執行任何一個特性的元素。
添加一個media屬性，用來包含你想要的特性，如視口的當前高度(viewport height)，寬度(width)，方向(orientation)等。
添加一個srcset屬性與相應的圖像文件名相匹配，進行載入。如果你想提供不同的像素密度，例如Retina顯示屏，你可以添加額外的文件名到你的srcset屬性中，
添加一個回退的元素。
這里有一個簡單的基本的例子，用來檢查視口是否小於768px，如果小於的話就載入一個較小的圖像：
1
picture
2
source srcset=
smaller.jpg
media=
(max-width: 768px)
3
source srcset=
default.jpg
4
img srcset=
default.jpg
alt=
My default image
5
/picture
你可能會注意到，在media屬性使用的語法與創建CSS媒體特性中使用的語法一樣。您可以使用相同的特性，這意味著你可以查詢max-width，min-width，max-height，min-height，orientation等屬性。
同時，您也可以使用這些特性判斷設備的方向，從而載入橫向或縱向版本的圖像，同時您也可以進行大小特性的混合。例如：
『叄』 響應式設計 同一張圖片分別用img和background調用，如何讓他們自適應屏幕的大小顯示的效果一樣

background-size:cover;backgrond-attachment:fixed;background-position:center;