幻灯片/轮播

jQuery支持触摸屏响应式轮播图插件

创客主机


Sangar Slider是一款功能非常强大的支持触摸屏的响应式jQuery轮播图插件。该轮播图插件具有图片响应式和支持移动触摸屏等特点,可用于作为jQuery插件或wordpress插件使用。该轮播图的特点有:

图片响应式和支持触摸屏设备

可制作全屏宽度轮播图

可以用于制作内容幻灯片

多种可用的轮播图导航方式:圆点按钮,文本和缩略图

可通过Javascript API来控制轮播图的导航

使用方法:

使用这个轮播图插件要引入sangarSlider.css、sangar-skin-default.css和jquery.sangarSlider.js文件,以及上面提到的外部依赖文件。

  1. <link rel="stylesheet" href="css/sangarSlider.css" type="text/css">
  2. <link rel="stylesheet" href="css/sangar-skin-default.css" type="text/css">
  3. <script type="text/javascript" src="js/jquery.js"></script>
  4. <script type="text/javascript" src="js/jquery-migrate.min.js"></script>
  5. <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
  6. <script type="text/javascript" src="js/imagesloaded.min.js"></script>
  7. <script type="text/javascript" src="js/jquery.sangarSlider.js"></script>

HTML结构:

该轮播图的基本HTML结构如下:

  1. <div class='sangar-slideshow-container' id='sangar-example'>
  2.     <div class='sangar-content-wrapper' style='display:none;'>
  3.         <div class='sangar-content'>
  4.             <img src='images/slide-1.jpg' />
  5.             <a href='http://www.htmleaf.com' target="_blank"></a>
  6.         </div>
  7.         <div class='sangar-content'>
  8.             <img src='images/slide-2.jpg' />
  9.             <a href='http://www.htmleaf.com'></a>
  10.         </div>
  11.         <div class='sangar-content'>
  12.             <img src='images/slide-3.jpg' />
  13.         </div>
  14.         <div class='sangar-content'>
  15.             <img src='images/slide-4.jpg' />
  16.         </div>
  17.         <div class='sangar-content'>
  18.             <img src='images/slide-5.jpg' />
  19.         </div>
  20.     </div>
  21. </div>

初始化插件:

在页面加载完毕之后,通过下面的方法来初始化该轮播图插件。

  1. jQuery(document).ready(function($) {
  2.     $('#sangar-example').sangarSlider();
  3. })

配置参数:

下面是该轮播图插件的默认配置参数:

  1. animation : 'horizontal-slide',
  2. animationSpeed : 600,
  3. continousSliding : true,
  4. showAllSlide : false,
  5. timer :  false,
  6. advanceSpeed : 3000,
  7. pauseOnHover : true,
  8. startClockOnMouseOut : true,
  9. startClockOnMouseOutAfter : 800,
  10. directionalNav : 'autohide',
  11. directionalNavShowOpacity : '0.9'
  12. directionalNavHideOpacity : '0.1',
  13. directionalNavNextClass : 'exNext',
  14. directionalNavPrevClass : 'exPrev',
  15. pagination : 'bullet',
  16. paginationContent : ["Lorem Ipsum", "Dolor Sit", "Consectetur", "Do Eiusmod", "Magna Aliqua"],
  17. paginationContentType : 'text',
  18. paginationContentWidth : 120,
  19. paginationImageHeight : 90,
  20. paginationContentFullWidth : false,
  21. paginationExternalClass : 'exPagination',
  22. skinClass : 'sangar-skin-default',
  23. width : 650,
  24. height : 400,
  25. scaleSlide : false,
  26. scaleImage : true,
  27. fixedHeight : true,
  28. background: "#222222",
  29. imageVerticalAlign : 'middle',
  30. jsOnly : false

选项:

名称可用值描述
animationhorizontal-slide, vertical-slide, fade轮播图的动画方式
animationSpeed[number]轮播图动画的速度
continousSlidingtrue, false控制轮播图不回滚
showAllSlidetrue, false显示所有的前一张和下一张图片
timertrue, false使用timer来自动播放轮播图
advanceSpeed[number]当timer可用时,该参数指定自动播放动画的过渡时间
pauseOnHovertrue, false是否在鼠标滑过时暂停自动播放
startClockOnMouseOuttrue, false是否在鼠标移出时开始计时
startClockOnMouseOutAfter[number]在鼠标移出后多长时间重新开始timer计时
directionalNavautohide, show, none定向导航
directionalNavShowOpacity[float from 0 to 1]
directionalNavHideOpacity[float from 0 to 1]
directionalNavNextClass[class name]next导航的class名称
directionalNavPrevClass[class name]prev导航的class名称
paginationbullet, content, none轮播图的导航类型
paginationContent[array string]可以是文本,图片或其它内容
paginationContentTypetext, image
paginationContentWidth[number]轮播图导航内容的宽度,单位像素
paginationImageHeight[number]图片导航的高度
paginationContentFullWidthtrue, false是否将轮播图的宽度设置为和容器宽度相等
paginationExternalClass[class name]如果你使用自己的列表来制作轮播图,用该参数指定class名称
skinClass[skin name]
width[number]轮播图的宽度
height[number]轮播图的高度
scaleSlidetrue, false是否将轮播图缩放为容器的尺寸
scaleImagetrue, false是否将图片是否到轮播图的尺寸
fixedHeighttrue, false是否在缩放时高度固定
background[color code]容器的背景颜色,不设置将是透明背景
imageVerticalAligntop, middle, bottom
jsOnlytrue, false只使用jQuery,不使用CSS3
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!