学步园

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}