zoukankan      html  css  js  c++  java
  • mislider jQuery响应式圆形图片轮播图特效制作(图片轮播效果二)

     

    1、介绍 mislider

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

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

    2、引入js和css文件:

    • jquery.min.js
    • mislider.js
    • mislider.css
    • mislider-custom.css

    3、构建HTML

     1      <h1>mislider图片轮播效果</h1>
     2         <div class="mis-stage">
     3               <ol class="mis-slider">
     4                 <li class="mis-slide">
     5                     <img src="img/m1.jpg" alt="故宫">
     6                 </li>
     7                 <li class="mis-slide">
     8                         <img src="img/m2.jpg" alt="黄山">
     9                     </li>
    10                     <li class="mis-slide">
    11                         <img src="img/m3.jpg" alt="石林">
    12                     </li>
    13                     <li class="mis-slide">
    14                         <img src="img/m4.jpg" alt="圆明园">
    15                     </li>
    16                     <li class="mis-slide">
    17                         <img src="img/m5.jpg" alt="千岛湖">
    18                     </li>
    19               </ol>
    20         </div>

    调用mislider.css文件,会有默认的样式效果,自己也可以设计调整。

    • mis-stage:可见区域的容器的class名称。
    • mis-slider:用于移动轮播图的 slide 容器元素。
    • mis-slide:每一个 slide 元素。
    • mis-container:有插件自动插入的容器元素。用于包裹每一个slide 元素。
    • mis-nav-buttons:前后箭头导航按钮的图片。
    • mis-nav-list:圆点导航按钮。

    4、写入JS初始化插件

    1      <script>
    2             jQuery(function($){
    3                 var slider = $(".mis-stage").miSlider();
    4             })
    5         </script>

    至此,根据默认参数值,已经有效果啦!看下图:

    5、配置mislider 轮播图插件的参数

    默认情况下,该轮播图插件使用的是有序列表的结构,如果你使用不同的元素结构,请确保要修改selectorSlider和selectorSlide选项。下面是每个参数的具体用法:

      1 jQuery(function ($) {
      2   var slider = $('.mis-stage').miSlider({
      3   // 轮播图过渡动画的速度 
      4   // 单位毫秒. Options: positive integer.
      5   speed: 700,
      6   // 轮播图在两个过渡动画之间的暂停时间 
      7   // in milliseconds. Options: false, positive integer. 
      8   // false = Autoplay off,设为false则不自动播放.
      9   pause: 4000,
     10   // 轮播图的增量 
     11   // Autoplay and Nav Buttons. 自动播放与导航按钮 
     12   // Options: positive or negative integer. 
     13   // Positive integer = Slide left. 正数向左
     14   // Negative integer = Slide right. 负数向右
     15   increment: 1,
     16   // 轮播图的高度 
     17   // Options: false or positive integer. 值:false或正整数
     18   // false = height is calculated using 设为false自动计算高度
     19   // maximum slide heights.最大高度
     20   stageHeight: false,
     21   // 同时在屏幕上可见的轮播图图片数量
     22   // Options: false or positive integer. 值:false或正整数
     23   // false = Fit as many as possible. false为自适应
     24   slidesOnStage: 1,
     25   // 连续运动-轮播图在同一个方向上无限循环 
     26   // true = slides loop in one direction if possible.
     27   slidesContinuous: true,
     28   // 当前轮播图在屏幕上的位置:left, center, right 
     29   // Options: 'left', 'right', 'center'.
     30   slidePosition: 'left',
     31   // 轮播图开始播放的位置. 
     32   // Options: 'beg', 'mid', 'end' 
     33   // or slide number starting at 1 - '1','2', etc.
     34   slideStart: 'beg',
     35   // 当前slide的宽度,单位px 
     36   // Options: false or positive integer. 值:false或正整数
     37   // false = width is the maximum of 设为false时为最大宽度
     38   // the existing slide widths.
     39   slideWidth: false,
     40   // 当前slide的缩放因子-其它图片会相应缩小
     41   // of the current slide
     42   // other slides are scaled down. 
     43   // Options: positive number 100 or higher. 
     44   // 100 = No scaling.
     45   slideScaling: 100,
     46   // slide的垂直偏移
     47   // as a percentage of slide height. 
     48   // Options: positive or negative number. 
     49   // Neg value = up. Pos value = down. 
     50   // 0 = No offset.
     51   offsetV: 0,
     52   // slide中的内容垂直居中
     53   // Boolean.
     54   centerV: false,
     55   // 原点导航按钮是否可用
     56   // Boolean.
     57   navList: true,
     58   // 箭头导航按钮是否可用
     59   // Boolean.
     60   navButtons: true,
     61   // 箭头导航一直显示
     62   // except when transitioning - Boolean.
     63   navButtonsShow: false,
     64   // 箭头导航按钮的透明度 
     65   // button navigation when not transitioning. 
     66   // Options: Number between 0 and 1. 
     67   // 0 (transparent) - 1 (opaque).
     68   navButtonsOpacity: 0.5,
     69   // 轮播图随机顺序
     70   // Boolean.
     71   randomize: false,
     72   // 轮播图加载后的回调函数
     73   // called when slides have loaded.
     74   slidesLoaded: false,
     75   // 轮播图过渡动画前的回调函数
     76   // call back function - called before 
     77   // the slide transition.
     78   beforeTrans: false,
     79   // 轮播图过渡动画完成之后的回调函数
     80   // call back function - called at the end 
     81   // of a slide transition.
     82   afterTrans: false,
     83   // Stage元素上的class名称
     84   // to the stage element.
     85   classStage: 'mis-stage',
     86   // The CSS class that will be Slider元素上的class名称
     87   // applied to the slider element.
     88   classSlider: 'mis-slider',
     89   // The CSS class that will be 每一个Slide元素上的class名称
     90   // applied to each slide element.
     91   classSlide: 'mis-slide',
     92   // The CSS class that will be 箭头导航按钮元素上的class名称
     93   // applied to the parent of the 
     94   // prev and next button navigation elements.
     95   classNavButtons: 'mis-nav-buttons',
     96   // The CSS class that will be 圆点导航按钮上的class名称
     97   // applied to the parent of the 
     98   // numbered list navigation elements
     99   classNavList: 'mis-nav-list',
    100   // The selector used to select 用于选择轮播图的选择器
    101   // the slider element
    102   // Descendant of the stage
    103   selectorSlider: 'ol',
    104   // The selector used to select 用于选择每一个Slide的选择器
    105   // each slide element
    106   // Descendant of the slider
    107   selectorSlide: 'li'
    108   });
    109  });

     这里只使用了部分参数:

     1   stageHeight: 380,
     2             
     3    slidesOnStage: false,
     4             
     5    slidePosition: 'center',
     6 
     7    slideStart: 'mid',
     8 
     9    slideScaling: 150,
    10 
    11    offsetV: -5,
    12             
    13    centerV: true,
    14 
    15    navButtonsOpacity: 1

    效果显示:

    还可以在每个li下面添图片说明:

    1 <li class="mis-slide">
    2    <img src="img/m5.jpg" alt="千岛湖">
    3    <h3>千岛湖</h3>
    4 </li>

    相应的也要将之前的js参数调整一下,或者有更多调整,效果显示:

     

    学习:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201505151836.html

  • 相关阅读:
    XML(学习笔记)
    css样式学习笔记
    Request(对象)
    sql一些错误修改的总结
    转载(如何学习C#)
    sql server(学习笔记2 W3Cschool)
    sql sqrver(学习笔记1 W3Cschool)
    关于 flutter开发碰到的各种问题,有的已经解决有的一直没解决或者用其他方法替代
    关于 Flutter IOS build It appears that your application still contains the default signing identifier.
    关于 flutter本地化问题 The getter 'pasteButtonLabel' was called on null
  • 原文地址:https://www.cnblogs.com/charmingyj/p/5688112.html
Copyright © 2011-2022 走看看