基于jQuery实现响应式圆形图片轮播特效

前端之家收集整理的这篇文章主要介绍了基于jQuery实现响应式圆形图片轮播特效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码分享给大家供大家参考。具体如下: 运行效果截图如下:

miSlider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,miSlider轮播图插件的特点有:

  • 使用简单
  • 在同一个屏幕中支持多个轮播图
  • 轮播图的内容可以是单张图片或复杂的HTML内容
  • 轻量级
  • 响应式设计
  • 非常容易定制
  • 丰富的回调函数
  • 跨浏览器,支持IE8+浏览器

引入核心文件

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

iSlider.css" rel="stylesheet"> iSlider-custom.css" rel="stylesheet">

构建html

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

    写入

    JS初始化插件

    iSlider({ // 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名称相同。

    参数

    iSlider({ // 轮播图过渡动画的速度 // 单位毫秒. 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','center'. slidePosition: 'left',// 轮播图开始播放的位置. // Options: 'beg','end' // or slide number starting at 1 - '1',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' }); });

    以上就是为大家分享的超酷的jQuery响应式圆形图片轮播图插件miSlider,希望大家可以熟练使用miSlider插件在自己的作品中能灵活运用。

    原文链接:https://www.f2er.com/jquery/51496.html

    猜你在找的jQuery相关文章