jFlow：jQuery内容滑动奇效插件的应用

jFlow是一款非常好的内容滑动(也有人称幻灯片)jquery插件，它主要用在网站的首页突出位置用来展示网站的最新动态、最新活动或最新产品等。

jFlow特点：

平滑过渡缓冲滑动；

可定制的是否自动滑动；

轻量级脚本，大小不到4KB；

滑动内容可定制，可以是大幅图片，也可以是文本或者图文混排。

应用实例：

关于jFlow的应用，网上很多文章只是援引了官方的例子，其实仔细研究，你会发现能实现很多漂亮的界面效果。

1、TAB滑动切换内容

2、数字导航滑动自动切换

3、方向按钮导航滑动切换

使用方法：

1、在HTML页面的head标签之间加入以下代码：

<script?type="text/javascript"?src="../js/jquery.js"></script>?
<script?type="text/javascript"?src="jquery.flow.1.2.auto.js"></script>?
<script?type="text/javascript">?
$(function(){?
????$("#myController").jFlow({?
????????slides:?"#slides",?
????????controller:?".jFlowControl",??
????????slideWrapper?:?"#jFlowSlide",??
????????selectedWrapper:?"jFlowSelected",??
????????auto:?true,???//自动播放，默认为false?
????????duration:?600,?//滑动时间间隔?
????????width:?"680px",??
????????height:?"275px",?
????????prev:?".jPrev",??//导航键头样式，注意使用.?
????????next:?".jNext"???//导航键头样式，注意使用.?
????});?
});?
</script>?

2、在body中加入以下代码：

<div?class="demo">?
???<div?id="slides">?
??????<div?class="slide_wrap">?
????????<img?src="images/s1.jpg"?alt="photo1"?/>?
??????</div>?
??????<div?class="slide_wrap">?
????????<img?src="images/s2.jpg"?alt="photo2"?/>?
??????</div>?
??????<div?class="slide_wrap">?
????????<img?src="images/s3.jpg"?alt="photo3"?/>?
??????</div>?
???</div>?
???<div?id="myController">?
??????<span?class="jPrev"><</span>?
??????<span?class="jFlowControl">1</span>?
??????<span?class="jFlowControl">2</span>?
??????<span?class="jFlowControl">3</span>?
??????<span?class="jNext">></span>?
???</div>?
</div>?

注意：ID为“myController”的DIV是主控制层，里面包含分页数字和导航箭头，ID为“slides”里面包含了滑动内容，可以是图片、文字等任何HTML元素的内容，值得注意的是class为“jFlowControl”里的span的个数要与class为“slide_wrap”的DIV个数要一致，如果你不想显示导航数字或按钮，你可以在CSS样式里设置。

3、CSS代码：

#myController{height:32px;?line-height:32px;?padding-right:20px;??
background:#333;?font-weight:bold;?font-size:14px;?text-align:right;??
white-space:nowrap;?z-index:1001;?position:relative;?margin-top:-32px;??
filter:alpha(opacity=50);?-moz-opacity:0.5;?opacity:0.5;}?
#myController?span{?padding:0?4px;?text-align:center;?cursor:pointer;??
color:#fff}?
#myController?span.jFlowSelected?{background:#d3d3d3;?color:#333}?