欢迎访问

云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

鼎浩网络,云南鼎浩信息技术有限公司

鼎浩客服热线

DING HAO COLUMN 鼎浩专栏

鼎浩的一些分享
Sharing from Ding Hao

  • 鼎浩服务
  • 1

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

来源:     2013年07月02日17:02
字号:T|T

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

jFlow特点:

平滑过渡缓冲滑动;

可定制的是否自动滑动;

轻量级脚本,大小不到4KB;

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

应用实例:

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

1、TAB滑动切换内容

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

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

查看演示DEMO 下载源码

使用方法:

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


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

photo1
photo2
photo3
< 1 2 3 >

注意: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}
客服中心
点击进行在线咨询

QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

咨询热线:0871-63399840

客服热线:0871-63523332

客服中心 客服中心