首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-10-07 
jFlow:jQuery内容滑动特效插件的应用2、数字导航滑动自动切换3、方向按钮导航滑动切换 使用方法:1、在HTML页

jFlow:jQuery内容滑动特效插件的应用

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

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

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

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

jFlow:jQuery内容滑动奇效插件的应用使用方法:

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}?
声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接,否则视为侵权。

热点排行