当前位置: 首页 > 工具软件 > nivo > 使用案例 >

jquery.nivo.slider轮播插件使用

夹谷英奕
2023-12-01
//引入样式
<link href="https://cdn.bootcss.com/jquery-nivoslider/3.2/nivo-slider.min.css" rel="stylesheet">
//引入js
<script src="https://cdn.bootcss.com/jquery-nivoslider/3.2/jquery.nivo.slider.min.js"></script>

//使用
$('#slider').nivoSlider({
// effect:'sliceUpRight', //轮播效果
 directionNav: false, //是否显示方向箭头
// animSpeed: 2500,  //动画时间
 pauseOnHover: true  //鼠标移上去是否暂停
});
//把默认的数字序号改成圆点
$('.nivo-control').html('');
$('.nivo-control').html('.');
/*如果需要修改样式,可以审查元素,重写插件的样式,比如重写轮播序号的样式*/
        .nivo-controlNav {
            text-align: center;
            padding: 0;
            position: relative;
            z-index: 1000;
            margin: -90px auto 0 auto;
            width: 100px;
        }

        .nivo-controlNav a {
            cursor: pointer;
            font-size: 66px;
            color: #FFF;
            opacity: 0.5;
        }

        .nivo-controlNav a.active {
            font-weight: 400;
            color: #FFF;
            opacity: 1;
            font-size: 66px;
        }

插件参数配置可参考:插件参数

 类似资料: