Melaksanakan kesan karusel imej bulat responsif berdasarkan jQuery_jquery

Contoh dalam artikel ini menerangkan pelaksanaan kod kesan khas karusel imej bulat responsif berdasarkan jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

mislider ialah pemalam kesan khas karusel imej responsif jQuery yang sangat keren Ciri-ciri pemalam karusel mislider ialah:

• Mudah digunakan
• Sokong berbilang karusel pada skrin yang sama
• Kandungan karusel boleh menjadi satu imej atau kandungan HTML yang kompleks
• Ringan
• Reka bentuk responsif
• Sangat mudah untuk disesuaikan
• Fungsi panggil balik yang kaya
• Pelayar silang, menyokong penyemak imbas IE8

Memperkenalkan fail teras
Pemalam mislider bergantung pada beberapa pemalam Sebelum memperkenalkannya, anda mesti memperkenalkan dahulu jQuery, html5shiv.js, mislider.min.js dan misslider.min.css, misslider -custom.css fail .

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

Bina 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>

Nota: Kelas di atas tidak diperlukan Jika anda tidak menulis kelas ini, pemalam akan menambah kelas secara automatik kepada elemen yang sepadan. Secara lalai, pemalam karusel menggunakan struktur senarai tersusun Jika anda menggunakan struktur elemen yang berbeza, pastikan anda mengubah suai pilihan selectorSlider dan selectorSlide.

Tulispemalam permulaan 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
   });
  });

Nota: Pastikan nama kelas pemilih jQuery .mis-stage dan bekas karusel dalam halaman HTML adalah sama.
Parameter

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

Di atas ialah pemalam karusel imej pekeliling responsif jQuery yang hebat yang dikongsikan dengan anda. Saya harap anda boleh menggunakan pemalam miSlider dengan cekap dan fleksibel dalam kerja anda sendiri.