幻灯片/轮播

支持移动设备响应式jQuery幻灯片插件

PetitQPetitQ 幻灯片/轮播 2018-11-08 1.57K 0
收藏
阿里云


iView 是一款效果非常炫酷的支持移动设备的响应式多功能 jQuery 幻灯片插件。该幻灯片插件简单易用，可以嵌入图片和视频，并且它可以制作图片标题的动画效果。可用它来制作幻灯片、banner 轮播图、banner 广告轮播图等等。该插件用 jQuery 代码将 HTML 转换为幻灯片，也可以通过定义 HTML5 data 属性来完成。这些标签都是有效的 HTML5 标签，并且对搜索引擎十分友好，利于 SEO。该幻灯片包含 35 种动画过渡效果，这些效果可以在所有的现代浏览器上工作，包括：ie6 - ie9, Firefox, Chrome, Opera, Safari，以及移动手机平台如 iOS 和 Android。为了减少页面的加载时间，该幻灯片插件基于每一个 slide 进行图片预加载，图片只会在准备显示的时候才被加载。

使用方法:

使用该幻灯片插件之前首先要引入必要的依赖文件。

也想出现在这里？联系我们吧
创客主机
  1. <link rel="stylesheet" href="iview.css" type="text/css" media="screen" />
  2. <script src="http://gapis.geekzu.org/ajax/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
  3. <script src="raphael-min.js" type="text/javascript"></script>
  4. <script src="jquery.easing.js" type="text/javascript"></script>
  5. <script src="iview.packed.js" type="text/javascript"></script>

HTML 结构:

该幻灯片插件使用的是嵌套的<div>结构。

  1. <div id="iview">
  2.     <!-- Slide 1 -->
  3.     <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>
  4.     <!-- Slide 2 -->
  5.     <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"></div>
  6. </div>

你也可以为每一张图片添加一个标题，你只需要在每个图片<div>中添加一个带 class 为 iview-caption 的<div>元素即可。

  1. <div id="iview">
  2.     <!-- Slide 1 -->
  3.     <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg">
  4.         <!-- Caption -->
  5.         <div class="iview-caption" data-x="0" data-y="0" data-width="400" data-height="300" data-transition="wipeRight" data-speed="700"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div>
  6.     </div>
  7.     <!-- Slide 2 -->
  8.     <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg">
  9.         <!-- Caption -->
  10.         <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div>
  11.     </div>
  12. </div>

如果你添加了多个图片标题到 iview-caption DIV 中，你可以决定每一个图片标题的动画效果。可用的动画效果有："wipeLeft", "wipeRight", "wipeTop", "wipeBottom", expandLeft , expandRight , expandTop , expandBottom , fade 。

  1. <div class="iview-caption" data-transition="fade">Caption description</div>

下面是更多的可用的 HTML5 data-attributes 属性。

属性 接收值
data-transition 动画过渡效果的类型可以是："wipeLeft", "wipeRight", "wipeTop", "wipeBottom", "expandLeft", "expandRight", "expandTop", "expandBottom", "fade"
data-easing 关于该属性的详细信息，可以参考http://jqueryui.com/easing/
data-speed 过渡动画的持续时间，单位毫秒
data-x 图片标题 X 轴的位置，单位像素
data-y 图片标题 Y 轴的位置，单位像素
data-width 图片标题的宽度，单位像素。如果不设置将使用源标题的宽度
data-height 图片标题的高度，单位像素。如果不设置将使用源标题的高度

调用插件:

在页面加载完毕之后，就可以通过下面的方法来抵用该幻灯片插件。

  1. <script type="text/javascript">
  2.   $(document).ready(function() {
  3.       $('#slider').iView();
  4.   });
  5. </script>

配置参数:

下面是该幻灯片插件的默认参数。

  1. $(document).ready(function() {
  2.     $('#slider').iView({
  3.         fx: 'random', // Specify sets like: 'left-curtain,fade,zigzag-top,strip-left-fade'
  4.         easing: 'easeOutQuad', // for the complete list http://jqueryui.com/demos/effect/easing.html
  5.         strips: 20, // Number of strips for strip animations
  6.         blockCols: 10, // Number of block columns for block animations
  7.         blockRows: 5, // Number of block rows for block animations
  8.         captionSpeed: 500, // Caption transition speed
  9.         captionEasing: 'easeInOutSine', // Caption transition easing effect
  10.         captionOpacity: 1, // Caption opacity
  11.         animationSpeed: 500, // Slide transition speed
  12.         pauseTime: 5000, // How long each slide will show
  13.         startSlide: 0, // Set starting Slide (0 index)
  14.         directionNav: true, // Next & Previous navigation
  15.         directionNavHoverOpacity: 0.6, // Fade on hover
  16.         controlNav: true, // 1,2,3,4... navigation
  17.         controlNavNextPrev: true, // previous,next navigation
  18.         controlNavHoverOpacity: 0.6, // Navigation fade on hover
  19.         controlNavThumbs: false, // Show thumbs navigation
  20.         controlNavTooltip: true, // Show tooltip image previewer
  21.         autoAdvance: true, // Force auto transitions
  22.         keyboardNav: true, // Use left & right arrows
  23.         touchNav: true, // Use Touch swipe to change slides
  24.         pauseOnHover: false, // Stop slider while hovering
  25.         nextLabel: "Next", // To set the string of the next button (Multilanguage use)
  26.         previousLabel: "Previous", // To set the string of the previous button (Multilanguage use)
  27.         playLabel: "Play", // To set the string of the play button (Multilanguage use)
  28.         pauseLabel: "Pause", // To set the string of the pause button (Multilanguage use)
  29.         closeLabel: "Close", // To set the string of the close button (Multilanguage use)
  30.         randomStart: false, // Start on a random slide
  31.         timer: 'Pie', // Timer style: "Pie", "360Bar" or "Bar"
  32.         timerBg: '#000', // Timer background
  33.         timerColor: '#EEE', // Timer color
  34.         timerOpacity: 0.5, // Timer opacity
  35.         timerDiameter: 30, // Timer diameter
  36.         timerPadding: 4, // Timer padding
  37.         timerStroke: 3, // Timer stroke width
  38.         timerBarStroke: 1, // Timer Bar stroke width
  39.         timerBarStrokeColor: '#EEE', // Timer Bar stroke color
  40.         timerBarStrokeStyle: 'solid', // Timer Bar stroke style
  41.         timerX: 10, // Timer X position threshold
  42.         timerY: 10, // Timer Y position threshold
  43.         tooltipX: 5, // Tooltip X position threshold
  44.         tooltipY: -5, // Tooltip Y position threshold
  45.         onBeforeChange: function(){}, // Triggers before a slide transition
  46.         onAfterChange: function(){}, // Triggers after a slide transition
  47.         onSlideshowEnd: function(){}, // Triggers after all slides have been shown
  48.         onLastSlide: function(){}, // Triggers when last slide is shown
  49.         onAfterLoad: function(){}, // Triggers when slider has loaded
  50.         onPause: function(){}, // Triggers when slider has paused
  51.         onPlay: function(){} // Triggers when slider has played
  52.     });
  53. });

上面的第一个参数 fx 是设置幻灯片的效果，可取值有：

random strip-down-right strip-down-left strip-up-right strip-up-left
strip-up-down strip-up-down-left strip-left-right strip-left-right-down slide-in-right
slide-in-left slide-in-up slide-in-down left-curtain right-curtain
top-curtain bottom-curtain fade block-random block-fade
block-fade-reverse block-expand block-expand-reverse block-expand-random block-drop-random
zigzag-top zigzag-bottom zigzag-grow-top zigzag-grow-bottom zigzag-drop-top
zigzag-drop-bottom strip-left-fade strip-right-fade strip-top-fade strip-bottom-fade

HTML5 data 属性:

该幻灯片插件的图片 URL 使用的是 HTML5 data-属性，这将允许我们只在准备显示图片的时候才加载图片（懒加载）。通过 HTML5 data- 属性你还可以添加其它的属性到幻灯片上。例如添加缩略图的 URL：

  1. <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>

或者为幻灯片添加过渡动画效果：

  1. <div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top"></div>

你也可以设置一个随机的动画过渡效果：

  1. <div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top,top-curtain,fade"></div>

下面是该幻灯片插件所用可用的 data-属性：

属性 接收值
data-iview:transition 动画过渡效果可以接收的值有： "strip-down-right", "strip-down-left", "strip-up-right", "strip-up-left", "strip-up-down", "strip-up-down-left", "strip-left-right", "strip-left-right-down", "slide-in-right", "slide-in-left", "slide-in-up", "slide-in-down", "left-curtain", "right-curtain", "top-curtain", "bottom-curtain", "fade", "block-random", "block-fade", "block-fade-reverse", "block-expand", "block-expand-reverse", "block-expand-random", "block-drop-random", "zigzag-top", "zigzag-bottom", "zigzag-grow-top", "zigzag-grow-bottom", "zigzag-drop-top", "zigzag-drop-bottom", "strip-left-fade", "strip-right-fade", "strip-top-fade", "strip-bottom-fade"
data-iview:easing 可以参考 http://jqueryui.com/easing/
data-iview:image 幻灯片图片保存的地址 URL
data-iview:thumbnail 幻灯片图片缩略图保存的地址 URL（如果controlNavThumbs设置为true）
data-iview:pausetime 一个 slide 结束到另一个 slide 开始的时间，单位毫秒
data-iview:type 幻灯片的类型，设置为 video 就该 slide 就用于视频播放

方法:

幻灯片的暂停和播放：

  1. $('#slider').trigger('iView:pause'); //Stop the Slider
  2. $('#slider').trigger('iView:play'); //Start the Slider

手动改变幻灯片：

  1. $('#slider').trigger('iView:goSlide', [2]); //Go to slide 2

前一个和下一个幻灯片：

  1. $('#slider').trigger('iView:previous'); //Go to previous slide
  2. $('#slider').trigger('iView:next'); //Go to next slide

设置幻灯片随机开始播放：

  1. var total = $('#slider').children().length;
  2. var rand = Math.floor(Math.random()*total);
  3. $('#slider').iView({
  4.     startSlide:rand
  5. });

支持移动设备响应式 jQuery 幻灯片插件

已有 392 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址

咨询客服 中文演示

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！

创客主机
收藏
赞(0)

相关文章

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！

登录