1. 首先在html中展示一張圖片：
<body>
<div id="bar">
<imgid="obj"src="images/bar1.jpg"/>
</div>
</body>2. 如之前的一個分享中提到的，要讓這個圖片做到適應不同手機屏幕的大小。通過CSS的設置來達到這個效果：
#bar img{
width:100%;
}
3. 通過js來做到圖片切換的效果：
var curIndex=0;
var timeInterval=2000;
var arr=new Array();
arr[0]="images/bar1.jpg";
arr[1]="images/bar2.jpg";
setInterval(changeImg,timeInterval);
function changeImg()
{
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}如上代碼實現了頂上bar的圖片切換。如果將這個頁面效果結合到我們之前的分享《手機網頁示例1》中，就能夠構造一個比較不錯的手機頁面，如下：
