基于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插件在自己的作品中能灵活运用。

(0)

相关推荐

  • Bootstrap开发实战之响应式轮播图

    本文主要内容是在导航条的下方做一张轮播图,自动播放最新的重要动态,供大家参考,具体内容如下 一.响应式轮播图 //响应式轮播图 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"

  • Bootstrap每天必学之响应式导航、轮播图

    本节课前一节我们开始设计第一个项目, 一个内训公司的企业网站, 本节课学习响应式导航部分. 基本导航组件+响应式: //基本导航组件+响应式 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class=

  • 基于cssSlidy.js插件实现响应式手机图片轮播效果

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-cap

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

    本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,mislider轮播图插件的特点有: 使用简单 在同一个屏幕中支持多个轮播图 轮播图的内容可以是单张图片或复杂的HTML内容 轻量级 响应式设计 非常容易定制 丰富的回调函数 跨浏览器,支持IE8+浏览器 引入核心文件 mislider插依赖于一些插件,在引入之前要先引入jQuery.html5shiv.j

  • jQuery手动点击实现图片轮播特效

    本文写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等. 下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边的大div设置的宽度为图片的宽度,超出大div宽度的都需要隐藏,但是对于盛放图片的小div设置宽度为2000px,大一点方便四张图左浮动布局 (3)当数字按钮点击时,获取按钮的

  • 使用BootStrap建立响应式网页——通栏轮播图(carousel)

    1.bootstrap提供了js插件--轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg(保存大图)和data-img-xs(保存小图)属性保存图片的路径,利用jQuery的data函数取出data-xxxx属性进行动态加载. 图片居中显示:大图用背景图片来做比较好一点,小图用img来做比较好一点(因为小图的话需要等比例缩放,用背景图做不到等比例缩放). 承载轮播图的盒子高度:大图的的时

  • 超漂亮的jQuery图片轮播特效

    超漂亮的jQuery图片轮播特效,使用了插件jCarousel,很棒的jQuery插件,支持带缩略图左右切换,支持Ajax加载数据,响应式布局,支持移动端触屏,强大的API参数配置功能以及函数回调功能,支持自定义动画速度和动画模式,支持轮播方向定义,还是很不错的,推荐学习和使用. 使用方法: 1.加载jQuery和插件 <link rel="stylesheet" type="text/css" href="jcarousel.basic.css&q

  • jquery图片轮播特效代码分享

    本文实例讲述了jquery图片轮播特效.分享给大家供大家参考.具体如下: 这是一款仿淘宝首页jquery轮播焦点图,基于jquery实现仿淘宝网首页正中间小焦点图特效. 运行效果图:         -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片轮播特效代码如下 <!DOCTYPE html> <head> <meta http-equiv=

  • jQuery带进度条全屏图片轮播特效代码分享

    本文实例讲述了jQuery带进度条全屏图片轮播特效.分享给大家供大家参考.具体如下: jQuery实现的带进度条转接全屏图片轮播效果是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效代码,实现效果大气,简洁大方 运行效果图:                  -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: link rel="sty

  • jQuery实现图片轮播特效代码分享

    本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: jquery图片轮播插件PgwSlider是一款非常简单的jquery插件,它可以帮你快速创建一个垂直轮播图. 运行效果图: 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="css/pgwslider.min.css" rel="stylesheet"> (2)js代码: <script sr

  • jQuery右侧选项卡焦点图片轮播特效代码分享

    本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码.分享给大家供大家参考.具体如下: jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击. 运行效果图: ----------------------查看效果-源码下载---------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式.  为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下 <!DOCTYPE html PUBLIC "-

  • jQuery实现的淡入淡出图片轮播效果示例

    本文实例讲述了jQuery实现的淡入淡出图片轮播效果.分享给大家供大家参考,具体如下: 1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致) css部分: <style> * { padding: 0; margin:0; } ul { list-style: none; } .out { width: 640px; height: 270px; margin:50px auto; position: relative; } .out img{ width: 640px; heig

随机推荐