//引入样式
<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;
}
插件参数配置可参考:插件参数