PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > JS特效 > 焦点图 > 正文

    jquery实现百叶窗特效的焦点图

    作者:admin来源:网络浏览:时间:2014-04-25 10:05:56我要评论
    分享到

    内容介绍

    使用方法:
    1、引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好了,其他建议不需要修改。
    2、引用js2个文件,一个jquery库,一个本特效插件jquery.nivo.slider.pack.js
    3、引用html里面代码,代码很少,吧body里面代码全部拷贝,注意id重名,head里面还有一段插件调用的js
    4、如果需要显示改图片介绍,可以在img里title里写,在给.nivo-caption p里面设置相关属性,我为了按钮下面的背景,吧文字隐藏了,完美兼容ie6-9,  火狐,谷歌,360,欧朋,遨游、注意额,低版本浏览器会有点卡,指ie6/7
    核心代码:
    jQuery(function($){
    ​$(window).load(function() {
      $('#slider').nivoSlider({
        directionNav: true,
        captionOpacity: 0.4,
        controlNav: true,
        boxCols: 8,
        boxRows: 4,
        slices: 15,
        effect:'random',
        animSpeed: 500,
        pauseTime: 3000 });
      });
    });
    下载资源:159 下载积分:0 积分
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-13-147-1.html