注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery超酷响应式圆形图片轮播图插件miSlider

jQuery插件 fishcity 3695浏览

jQuery超酷响应式圆形图片轮播图插件miSlider

mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件。mislider插件可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效。mislider轮播图插件的特点有:

  • 使用简单

  • 在同一个屏幕中支持多个轮播图

  • 轮播图的内容可以是单张图片或复杂的HTML内容

  • 轻量级

  • 响应式设计

  • 非常容易定制

  • 丰富的回调函数

  • 跨浏览器,支持IE8+浏览器

jquery实例教程:jQuery超酷响应式圆形图片轮播图插件miSlider

引入核心文件

mislider插依赖于一些插件,在引入之前要先引入jQuery、html5shiv.js、mislider.min.js以及mislider.min.css,mislider-custom.css文件。

<link href="css/mislider.css" rel="stylesheet">
<link href="css/mislider-custom.css" rel="stylesheet">
<script src="../lib/html5shiv/html5shiv.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/mislider.js"></script>

构建html

<ol class="mis-slider">
            <!-- slider 元素 - class是一个参数选项  -->
            <li class="mis-slide">
                <!-- 一个旋转元素 - class是一个参数选项 -->
                <a href="#" class="mis-container">
                    <!-- A slide container - this element is optional, if absent the plugin adds it automatically -->
                    <figure>
                        <!-- Slide content - whatever you want -->
                        <img src="images/garden01.jpg" alt="Pink Water Lillies">
                        <figcaption>Pink Water Lillies</figcaption>
                    </figure>
                </a>
            </li>
            <li class="mis-slide">
                <a href="#" class="mis-container">
                    <figure>
                        <img src="images/garden02.jpg" alt="Pond with Lillies">
                        <figcaption>Pond with Lillies</figcaption>
                    </figure>
                </a>
            </li>
 </ol>

注意:上面的class并不是必须的,如果不写这些class,插件会自动为相应的元素添加class。默认情况下,该轮播图插件使用的是有序列表的结构,如果你使用不同的元素结构,请确保要修改selectorSlider和selectorSlide选项。

写入JS初始化插件

jQuery(function ($) {
            var slider = $('.mis-stage').miSlider({
                //  The height of the stage in px. Options: false or positive integer. false = height is calculated using maximum slide heights. Default: false
                stageHeight: 380,
                //  Number of slides visible at one time. Options: false or positive integer. false = Fit as many as possible.  Default: 1
                slidesOnStage: false,
                //  The location of the current slide on the stage. Options: 'left', 'right', 'center'. Defualt: 'left'
                slidePosition: 'center',
                //  The slide to start on. Options: 'beg', 'mid', 'end' or slide number starting at 1 - '1','2','3', etc. Defualt: 'beg'
                slideStart: 'mid',
                //  The relative percentage scaling factor of the current slide - other slides are scaled down. Options: positive number 100 or higher. 100 = No scaling. Defualt: 100
                slideScaling: 150,
                //  The vertical offset of the slide center as a percentage of slide height. Options:  positive or negative number. Neg value = up. Pos value = down. 0 = No offset. Default: 0
                offsetV: -5,
                //  Center slide contents vertically - Boolean. Default: false
                centerV: true,
                //  Opacity of the prev and next button navigation when not transitioning. Options: Number between 0 and 1. 0 (transparent) - 1 (opaque). Default: .5
                navButtonsOpacity: 1
            });
        });

注意:要确保.mis-stage jQuery选择器和HTML页面中的轮播图容器的class名称相同。

参数

   jQuery(function ($) {
            var slider = $('.mis-stage').miSlider({
                //  轮播图过渡动画的速度 
                //  单位毫秒. Options: positive integer.
                speed: 700,
                //  轮播图在两个过渡动画之间的暂停时间  
                //  in milliseconds. Options: false, positive integer. 
                //  false = Autoplay off,设为false则不自动播放.
                pause: 4000,
                //  轮播图的增量 
                //  Autoplay and Nav Buttons. 自动播放与导航按钮 
                //  Options: positive or negative integer. 
                //  Positive integer = Slide left. 正数向左
                //  Negative integer = Slide right. 负数向右
                increment: 1,
                //  轮播图的高度 
                //  Options: false or positive integer. 值:false或正整数
                //  false = height is calculated using 设为false自动计算高度
                //  maximum slide heights.最大高度
                stageHeight: false,
                //  同时在屏幕上可见的轮播图图片数量
                //  Options: false or positive integer. 值:false或正整数
                //  false = Fit as many as possible. false为自适应
                slidesOnStage: 1,
                //  连续运动-轮播图在同一个方向上无限循环 
                //  true = slides loop in one direction if possible.
                slidesContinuous: true,
                //  当前轮播图在屏幕上的位置:left, center, right 
                //  Options: 'left', 'right', 'center'.
                slidePosition: 'left',
                //  轮播图开始播放的位置. 
                //  Options: 'beg', 'mid', 'end' 
                //  or slide number starting at 1 - '1','2', etc.
                slideStart: 'beg',
                //  当前slide的宽度,单位px 
                //  Options: false or positive integer. 值:false或正整数
                //  false = width is the maximum of 设为false时为最大宽度
                //  the existing slide widths.
                slideWidth: false,
                //  当前slide的缩放因子-其它图片会相应缩小
                //  of the current slide
                //  other slides are scaled down. 
                //  Options: positive number 100 or higher. 
                //  100 = No scaling.
                slideScaling: 100,
                //  slide的垂直偏移
                //  as a percentage of slide height. 
                //  Options:  positive or negative number. 
                //  Neg value = up. Pos value = down. 
                //  0 = No offset.
                offsetV: 0,
                //  slide中的内容垂直居中
                //  Boolean.
                centerV: false,
                //  原点导航按钮是否可用
                //  Boolean.
                navList: true,
                // 箭头导航按钮是否可用
                //  Boolean.
                navButtons: true,
                //  箭头导航一直显示
                //  except when transitioning - Boolean.
                navButtonsShow: false,
                //  箭头导航按钮的透明度 
                //  button navigation when not transitioning. 
                //  Options: Number between 0 and 1. 
                //  0 (transparent) - 1 (opaque).
                navButtonsOpacity: 0.5,
                //  轮播图随机顺序
                //  Boolean.
                randomize: false,
                //  轮播图加载后的回调函数
                //  called when slides have loaded.
                slidesLoaded: false,
                //  轮播图过渡动画前的回调函数
                //  call back function - called before 
                //  the slide transition.
                beforeTrans: false,
                //  轮播图过渡动画完成之后的回调函数
                //  call back function - called at the end 
                //  of a slide transition.
                afterTrans: false,
                //  Stage元素上的class名称
                //  to the stage element.
                classStage: 'mis-stage',
                //  The CSS class that will be Slider元素上的class名称
                //  applied to the slider element.
                classSlider: 'mis-slider',
                //  The CSS class that will be  每一个Slide元素上的class名称
                //  applied to each slide element.
                classSlide: 'mis-slide',
                //  The CSS class that will be  箭头导航按钮元素上的class名称
                //  applied to the parent of the 
                //  prev and next button navigation elements.
                classNavButtons: 'mis-nav-buttons',
                //  The CSS class that will be  圆点导航按钮上的class名称
                //  applied to the parent of the 
                //  numbered list navigation elements
                classNavList: 'mis-nav-list',
                //  The selector used to select  用于选择轮播图的选择器
                //  the slider element
                //  Descendant of the stage
                selectorSlider: 'ol',
                //  The selector used to select 用于选择每一个Slide的选择器
                //  each slide element
                //  Descendant of the slider
                selectorSlide: 'li'
            });
        });

转载请注明:jQ酷 » jQuery超酷响应式圆形图片轮播图插件miSlider

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。