手机网页的设计,除了页面内容会适应屏幕大小做自适应外,设计者常常用到的一个效果是顶上bar的图片切换。下面通过html+js+css的方式,给出一个这样的示例:
1. 首先在html中展示一张图片:
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》中,就能够构造一个比较不错的手机页面,如下: