HTML5圖片切換

使用HTML5和CSS3技術實現圖片無縫輪播效果，代碼如下：

代碼解析：

.container{
position: relative;        //相對定位
width: 300px;
height: 200px;            //設置容器寬度和高度
overflow: hidden;         //隱藏內容溢出
}
.container img{
position: absolute;       //絕對定位
width: 300px;
height: 200px;            //設置圖片寬度和高度
opacity: 0;               //設置透明度為0，即隱藏
transition: all 1s linear;  //設置動畫屬性，時長1s，線性過渡
}
.container img.active{
opacity: 1;               //顯示當前圖片
}

以上代碼即可實現三張圖片無縫輪播效果。