在HTML5中，可以通過編寫代碼來實現自動切換圖片和內容的效果。主要通過JavaScript和CSS的配合來實現以下代碼實現：

上述代碼主要分為兩部分：CSS樣式和JavaScript腳本。

首先，在CSS樣式中，通過設定圖片容器div的寬度，高度和相對定位，并將圖片的position屬性設為絕對定位，左上角對齊，同時設置opacity屬性將圖片設置為不可見狀態，以及設置z-index將圖片的層級設為1，變化時過渡效果為.8秒內完成，同時給當前顯示的圖片與下一張圖片設置兩個類名active和nextImg：

.img-box{
	width: 500px;
	height: 300px;
	position: relative;
}
.img-box img{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 1;
	transition: opacity .8s ease-in-out;
}
.active{
	opacity: 1;
	z-index: 2;
}

接著，在JavaScript腳本中，首先利用window.onload方法，在網頁加載完成后獲取所有的圖片，以及定義初始參數index和interval，其中index是當前顯示圖片的索引，interval是圖片切換的時間間隔，在此設定初始值為2000毫秒。隨后調用函數changeImg(index)來切換圖片，首次調用時傳入參數index=0，執行動畫效果，然后通過setInterval循環調用changeImg()方法，并依次將index的值加1，當index的值達到len（即圖片數量）時，將index重置為0。changeImg(index)方法實現了通過修改類名來實現圖片切換的效果，其中class屬性為active表示當前顯示的圖片，其他圖片的class屬性為空，即設為默認值。

window.onload = function(){
	var imgs = document.getElementById('img-box').getElementsByTagName('img');//獲取所有的圖片
	var len = imgs.length;//圖片的數量
	var index = 0;//當前顯示圖片的索引
	var interval = 2000;//間隔時間
//首次調用動畫
	changeImg(index);
//循環調用動畫
	setInterval(function(){
index++;
if(index==len){
index=0;
}
changeImg(index);//切換圖片
	},interval);
//顯示圖片
	function changeImg(index){
for(var i=0;i
因此，通過以上代碼，即可實現自動切換圖片和內容的效果。