jquery.nivo.slider.js插件轮播图代码
  • 分享到微信朋友圈
    X
立即下载 查看演示

‌Nivoslider是一款基于jQuery的，能实现多种切换效果的图片切换插件。Nivoslider提供了11种切换效果，支持多种参数配置和方法函数调用，使用简单，是一款非常理想的图片切换插件。

主要js

<!--脚本入口参数-->
<script type="text/javascript">
    $(window).load(function () {
        $('#slider').nivoSlider({
            effect: 'random',
            slices: 14,
            animSpeed: 500,
            pauseTime: 2000,
            startSlide: 0, //Set starting Slide (0 index)
            directionNav: false,
            directionNavHide: false, //Only show on hover
            controlNav: false, //1,2,3...
            controlNavThumbs: false, //Use thumbnails for Control Nav
            pauseOnHover: true, //Stop animation while hovering
            manualAdvance: false, //Force manual transitions
            captionOpacity: 0.8, //Universal caption opacity
            beforeChange: function () { },
            afterChange: function () { },
            slideshowEnd: function () { } //Triggers after all slides have been shown
        });
    });
</script>

引入js,css

只需在您的页面上引用jquery.nivo.slider.js即可。 jquery.nivo.slider.js依赖于jQuery，因此请确保首先包含它。

 <!--轮播图样式-->
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<!--脚本库-->
<script src="js/jquery.min.js" type="text/javascript"></script> 
<!--脚本程序-->
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>

更多参数说明

  • effect 图片切换效果。提供了11种效果：'sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft', 'sliceUpDown','sliceUpDownLeft', 'fold','fade','slideInRight','slideInLeft'，诸如渐入渐出，滑动，百叶窗等等都有。

  • animSpeed 图片切换速度（毫秒） 500

  • pauseTime 图片停留时间（毫秒） 3000

  • startSlide 开始切换的位置（即从第几张图开始切换）。 0

  • directionNav 是否使用左右按钮导航 true

  • directionNavHide 是否当鼠标滑上图片时出现左右导航按钮 true

  • controlNav 是否使用导航控制条，即显示每张图片的按钮 true

  • controlNavThumbs 是否使用缩略图控制导航 false

  • controlNavThumbsFromRel 是否使用图片的rel属性关联缩略图 false

  • controlNavThumbsSearch 缩略图类型 '.jpg'

  • controlNavThumbsReplace 缩略图后缀 '_thumb.jpg'

  • keyboardNav 是否支持键盘方向键切换（貌视IE不支持） true

  • pauseOnHover 当鼠标滑向图片时，停止切换 true

  • manualAdvance 是否不自动切换，当为true时，需要手动切换 false

  • captionOpacity 设置图片标题说明的背景透明度 0.8

  • beforeChange 当发生切换前，回调函数

  • afterChange 当发生切换后，回调函数

  • slideshowEnd 完成所有的切换动作后，回调函数

  • lastSlide 切换最后一张图片时，回调函数

  • afterLoad 当加载完成时，回调函数