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


Posted in Javascript onNovember 25, 2015

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

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

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

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

引入核心文件
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'
   });
  });

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

Javascript 相关文章推荐
当前流行的JavaScript代码风格指南
Sep 10 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
javascript生成大小写字母
Jul 03 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
Vuex 入门教程
Jan 10 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
jquery+css实现动感的图片切换效果
Nov 25 #Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 #Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 #Javascript
Prototype框架详解
Nov 25 #Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 #Javascript
Bootstrap每天必学之下拉菜单
Nov 25 #Javascript
使用Javascript写的2048小游戏
Nov 25 #Javascript
You might like
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
估算杭州有多少软件工程师
2015/08/11 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
写好自荐信的技巧
2013/11/08 职场文书
2014年教师节寄语
2014/08/11 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
相亲活动方案
2014/08/26 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python