基于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 相关文章推荐
js猜数字小游戏的简单实现代码
Jul 02 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jquery操作angularjs对象
Jun 26 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
理解jquery事件冒泡
Jan 03 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
js实现自定义右键菜单
May 18 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 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下载远程文件类(支持断点续传)
2008/11/14 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
php 保留字列表
2012/10/04 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Apache如何部署django项目
2017/05/21 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Django models文件模型变更错误解决
2020/05/11 Python
python中selenium库的基本使用详解
2020/07/31 Python
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
信息部岗位职责
2013/11/12 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
好邻里事迹材料
2014/01/16 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书