Implémentation d'effets de carrousel d'images circulaires réactifs basés sur jQuery_jquery

L'exemple de cet article décrit l'implémentation d'un code d'effets spéciaux de carrousel d'images circulaires réactif basé sur jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

mislider est un plug-in d'effets spéciaux de carrousel d'images circulaires réactif jQuery très cool. Les fonctionnalités du plug-in de carrousel mislider sont :

• Facile à utiliser
• Prend en charge plusieurs carrousels sur le même écran
• Le contenu du carrousel peut être une image unique ou un contenu HTML complexe
• Léger
• Conception réactive
• Très facile à personnaliser
• Fonctions de rappel riches
• Cross-navigateur, prend en charge le navigateur IE8

Présentation des fichiers de base
Le plug-in mislider dépend de certains plug-ins Avant de l'introduire, vous devez d'abord introduire jQuery, html5shiv.js, mislider.min.js et . mislider.min.css, fichier 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>

Construire du 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>

Remarque : Les classes ci-dessus ne sont pas nécessaires. Si vous n'écrivez pas ces classes, le plug-in ajoutera automatiquement des classes aux éléments correspondants. Par défaut, le plug-in carrousel utilise une structure de liste ordonnée. Si vous utilisez une structure d'éléments différente, assurez-vous de modifier les options selectorSlider et selectorSlide.

ÉcrirePlug-in d'initialisation 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
   });
  });

Remarque : assurez-vous que le nom de classe du sélecteur jQuery .mis-stage et le conteneur carrousel dans la page HTML sont identiques.
Paramètres

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'
  });
 });

Ce qui précède est le plug-in de carrousel d'images circulaires réactif jQuery que miSlider a partagé avec vous. J'espère que vous pourrez utiliser le plug-in miSlider avec compétence et flexibilité dans vos propres travaux.