手机网页示例2——一个简单的顶上bar图片切换效果

来源：互联网发布：mac系统怎么保存文档编辑：程序博客网时间：2024/06/05 11:45

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

0 0