超炫的仿ipad左右滑动图片轮换效果的实现——网站开发实例解析

在我们看来：一个成熟的网站，不仅需要有漂亮的外观、完备的功能、高效的执行速度，还需要有较高的安全性、较好的推广性（SEO）、较强的交互性以及方便的使用性等。因此，正规的网站开发是一个综合而复杂的过程，需要有独到的创意吸引用户，需要有精湛的技术以实现功能，需要多方面人员如设计师（创意、框架）、美工（效果源图）、前端（切图及HTML/CSS编码）、脚本(特效，前端交互）、程序员（业务逻辑）、数据库人员（数据库设计，数据处理）等团队成员的全力协作。需要精雕细琢而并非一蹴而就的。本篇文章着重于网站的界面呈现，从前端脚本的角度浅析新的图片轮换效果的实现。

本文要实现的是一个类似于ipad的左右滑动轮换图片的效果：在默认情况下，图片能定时自动左右无缝切换图片。当鼠标悬停于图片上方时将停止切换，由于图片可能被内嵌于链结之中，当点击图片时需要能定向到相关页面。在切换的图片的正下方需提供点状按钮以便用户手动切换图片，按钮需浮在图片上方中间偏下位置且除按钮外不遮挡图片其它位置。切换按钮也需要有鼠标悬停效果。

类似于图片无缝切换的前端脚本不难实现，如网络上常见的实现方式是采用两个层，一个层保存数据，另一个层则起到过渡的作用，然后通过js控制将其中一个层中的所有图片数据循环的呈现在第二个层中。这里要求第一个层中的图片所有宽度大于页面呈现宽度，需要从样式上隐藏多出来的部分，层的宽度需要是预先设定的固定值。但是该实现方式没有用户手动切换的功能，且切换的方式一般是以一定的速度左右滚动，与需要实现的幻灯片似的切换也有区别。因此，我们不考虑在该技术上进行进一步修改或完善。

我们这里采用的是基于jquery的图片切换插件jquery.cycle的实现方式，该插件功能强大，浏览器兼容性强，使用简单，在进行一些特定的设置后就可以实现以上功能要求。

首页需要引入jquery库：<script src="js/jquery.min.js" type="text/javascript"></script>，然后再引入插件脚本：<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>，该插件可以从 [这里] 下载。

以下是网页HTML呈现代码，如:

<div id="homebanner" >
<div id="imgcontent">
<a href="page1.html"><img src="banner_images/banner01.jpg" /></a>
<a href="page2.html"><img src="banner_images/banner02.jpg" /></a>
<a href="page3.html"><img src="banner_images/banner03.jpg" /></a>
<a href="page4.html"><img src="banner_images/banner04.jpg" /></a>
</div>
<div id="pagerctrl"></div>
</div>

这里的banner图片由链结标签所包围，点击后可链结到相应页面。其中图片的数目并非固定的，可以按上述格式任意添加，当然也可以通过服务器程序脚本动态生成。homebanner为外围标签，imgcontent为滚动图片层，pagerctrl为图片控制按钮层。以上名称均可自定义，但要注意与CSS的配合。由于滚动图片层中的图片是逐一呈现的，因此默认条件下该层中的内容是相互叠加并遮挡的，这里是通过cycle脚本配合CSS实现的，其中CSS中需定义该层为相对层，即position:relative，然后设置好长度、宽度，最后需要设置清除溢出，即：overflow:hidden。而图片控制按钮层需要浮在图片正中偏下位置，这里通过CSS中层的绝对定位的方法来实现：在CSS中定义homebanner为相对层，pagerctrl为绝对定位层，然后设置好边距，如bottom:20px;left:460px;等。最后，由于脚本将在控制层中动态生成控制链结，也需要设置好该链结的样式，即#pagerctrl a的样式，除此以外，还要设置该链结在活动状态的样式#pagerctrl a.activeSlide，一般可以用不同的图片背景来实现。本案例的CSS样式如下：

#homebanner {width:980px;text-align:left;height:330px;position:relative;background:#fff;}
#pagerctrl {position:absolute;bottom:20px;left:460px;width:200px;height:10px;z-index:15000}
#pagerctrl a {display:block;width:10px;height:10px;float:left;margin:0px 3px;background:url("../images/pagericon.png") no-repeat;}
#pagerctrl a.activeSlide {background:url("../images/pagericon_over.png") no-repeat; }
#imgcontent {top:0;left:0;height:330px;position:relative;z-index:5;width:980px;overflow:hidden;background:#fff;}
#imgcontent a{display:block;}

最后还需要在网页中加入脚本调用代码：

<script type="text/javascript" language="javascript">
$(function() {
$('#imgcontent').cycle({
fx: 'scrollHorz',
pause: 1,
pagerEvent: 'mouseover',
pauseOnPagerHover: 1,
pager: "#pagerctrl",
pagerAnchorBuilder: function(idx, slide) {
return "<a href='#' ><img src='images/spacer.gif' border=0 /></a>";
},
sync: 1
});
});
</script>

其中涉及到的jquery脚本的语法在此不再详述，这里仅说明一下几个参数：

$('#imgcontent').cycle这行定义了调用图片轮换脚本的对象imgcontent。fx为图片切换效果，scrollHorz即为水平切换，其它效果请参照插件使用说明。pause和pauseOnPagerHover为切换停顿时间，pagerEvent为图片控制按钮的响应事件，这里设置为当鼠标移动上去时响应。pager定义图片控制按钮层，此处为pagerctrl。pagerAnchorBuilder为图片控制按钮生成事件代码，此处插入空白的图片。

当以上工作完成后就可以测试了，在实际操作中应注意各层的id与样式及脚本关联，不论是静态页面还是动态页面均可以用上述方法实现完美的图片切换效果。