nivo-slider的初次使用

Nivo Slider一款jquery banner广告插件,广告轮换效果多样,使用起来比较简单,官方教程:[url]http://docs.dev7studios.com/jquery-plugins/nivo-slider[/url]。这里就不多说了,这里主要记录一下,使用过程中遇到的一些问题。
1.样式:
除了官方的几套主题外,我们可以自定义样式,只需在自己的css里复写诸如:.nivo-prevNav,.nivo-nextNav,.nivo-controlNav的类就可以了。

2.如何去除官方的一些默认文字:
像两个方向空盒子按钮prev,next以及page页码1,、2、3、4等,查看了一下官方的demo,是采用text-indent=-9999隐藏文字的做法,然而我最后发现,这种做法容易导致ie6,ie7出现一些兼容性问题,如页码标签我的样式是这样的:
.nivo-controlNav a{
display: inline-block;
height: 14px;
width: 14px;
overflow: hidden;
text-indent: -9999px;
margin: 0 4px;
border: 3px solid #fff;
border-radius: 15px;
}

结果在ie6,ie7下面,页码标签直接就没有了。这里的问题就出在,往往我们想让页码标签居中显示,所以在.nivo-controlNav中就有text-align:center,配合inline-block、text-indent问题,就导致了页码标签的偏移消失。我用ie6,7打开官方demo,结果一样,⊙﹏⊙b汗。。最后百度了一下,找到了另一种方法,其实可以设置:font-size=0;line-height=0;同样也可以隐藏文字。

3.prev,next按钮的hover动态显示:
老版本的Nivo Slider可以通过设置配置参数{directionNavHide:true}来实现,然而新版本的Nivo Slider却删除了该功能,不了改~~貌似只能自能自己通过js来实现了。

最后补充一句,测试时,可千万不要因为懒而使用使用一样的图片,另外图片最好大小一致,否则会很失望。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值