学步园

Nivo Slider 为jquery 和wordpress 打造的多种焦点图切换方式插件

Nivo slider ：官方地址：http://nivo.dev7studios.com

demo 样式 地址：http://nivo.dev7studios.com/demos/

下载地址：http://nivo.dev7studios.com/pricing/

div +css 请参照原文 ，这里不做详细的介绍

jquery插件  方法介绍地址：http://nivo.dev7studios.com/support/jquery-plugin-usage/

nivoslider.js原文 jquery 默认方法

<script type="text/javascript">
    $(window).load(function () {
        $('#slider').nivoSlider({
            effect: 'random', // effect过渡效果图片切换效果。
            slices: 15, // effect为切片效果时的数量
            boxCols: 8, // For box animations 盒装动画 默认8列
            boxRows: 4, // For box animations  盒式动画 默认四行 （还没搞懂神马，在运行百叶窗时 有这个四行八列的效果。应该是控制这个的）
            animSpeed: 500, // Slide transition speed 动画切换速度(毫秒)
            pauseTime: 3000, // How long each slide will show图片切换间隔时间(毫秒)
            startSlide: 0, // Set starting Slide (0 index) 图片切换开始图片编号  
            directionNav: true, // Next & Prev navigation 是否显示图片切换左右按钮
            directionNavHide: true, // Only show on hover 是否鼠标在图片上才显示左右切换按钮
            controlNav: true, // 1,2,3... navigation 显示序列导航 即显示每张图片的按钮
            controlNavThumbs: false, // Use thumbnails for Control Nav 是否使用缩略图控制导航
            pauseOnHover: true, // Stop animation while hovering 当鼠标滑向图片时，停止切换
            manualAdvance: false, // Force manual transitions 是否不自动切换，false为自动切换，当为true时，需要手动切换
            prevText: 'Prev', // Prev directionNav text 上一张图片
            nextText: 'Next', // Next directionNav text 下一张图片
            randomStart: false, // Start on a random slide 随机开始（暂时没搞懂这个参数的意义）
            //好像还有以下一些参数，官方3.1好像还有没有罗列的参数controlNavThumbsFromRel: false, // 使用img的rel属性作为缩略图地址
            controlNavThumbsSearch: ".jpg", // 缩略图的类型
            controlNavThumbsReplace: "_thumb.jpg", //缩略图后缀
            keyboardNav: true, //是否支持键盘方向键切换（貌视IE不支持）
            captionOpacity: 0.5, //设置图片标题说明的背景透明度 ，这个很实用
            beforeChange: function () { }, // Triggers before a slide transition
            afterChange: function () { }, // Triggers after a slide transition
            slideshowEnd: function () { }, // Triggers after all slides have been shown
            lastSlide: function () { }, // Triggers when last slide is shown
            afterLoad: function () { } // Triggers when slider has loaded
        });
    });
</script>