适用于多种设备的的滑块幻灯片插件--jquery插件Swiper

今天为大家推荐一款支持多种设备（移动端，平板，pc端）的滑块幻灯片插。我测试的是ie7.

下载后解压：

在demos文件中有很多种常见的用法，根据自己的项目需要选择其中之一即可。

下面是其中效果：

使用方法

1：引入jq库

2：引入 Swiper文件：

3：引入 Swipe基本样式：

4：写入html：

4.1：比较完整的html：

  

      左右箭头
    
    

      

        
  
 轮播图片
        
  
        

          
  轮播图片上的内容
            
Slide with HTML
            
You can put any HTML inside of slide with any layout, not only images, even another Swiper!
          
        
      
    
    
 分页
  

5:写入js初始化插件：

补充：我在网上找了一些Swiper的基本设置：

• mySwiper.disableMousewheelControl()– 关闭鼠标滚轮控制

• mySwiper.enableMousewheelControl()– 开启鼠标滚轮控制

• mySwiper.enableKeyboardControl()– 开启按键控制

• mySwiper.disableKeyboardControl()– 关闭按键控制

• mySwiper.swipeNext()– 变形到下一个slide

• mySwiper.swipePrev() – 变形到上一个slide

• mySwiper.swipeTo(index, speed, runCallbacks) – 跳转到index值的slide，speed为跳转的速度，runCallbacks为跳转后回调的涵数

• mySwiper.browser.ie10 – 如果是IE10返回true

• mySwiper.browser.ie8 – 如果是IE8返回true

• mySwiper.support.touch –如果支持触屏事件返回true

• mySwiper.support.transforms -如果支持CSS3变型返回true

• mySwiper.support.transforms3d – 如果支持CSS3 3D变型返回true

• mySwiper.support.transitions – 如果支持CSS3返回true

• mySwiper.activeSlide() – 返回当前slide的内容

• mySwiper.clickedSlideIndex – 返回单击或触摸后的slide的index值. 便于 "onSlideTouch" 和"onSlideClick" 调用

• mySwiper.clickedSlide – 返回单击或触摸后的slide的内容. 便于 "onSlideTouch" 和"onSlideClick" 调用.

• mySwiper.activeIndex – 返回当前slide的index值.

• mySwiper.activeLoopIndex – 在循环模式下返回当前slide的index值.

• mySwiper.activeLoaderIndex – 在加载模式下返回当前slide的index值.

• mySwiper.previousIndex – 返回上一个slide的index值.

• mySwiper.startAutoplay() – 开始自动播放.

• mySwiper.stopAutoplay() – 停止自动播放.

• mySwiper.destroy( removeResizeEvent ) – 将删除所有附加事件侦听器

• mySwiper.resizeFix() – 在slide改变大小窗口没有变时调用此函数.

• mySwiper.reInit() – 初始化 Swiper. 用于动态添加或删除 slides.

• mySwiper.width – 返回swiper容器的宽度

• mySwiper.height – 返回swiper容器的高度

• mySwiper.isTouched – 当触摸slide时返回true

• mySwiper.positions -返对对象容器的x轴与y轴值

• mySwiper.touches -返回对象的信息

• mySwiper.params – 访问对象与传递的参数初始化.初始化后你可以重定义参数, 像mySwiper.params.speed=500

• mySwiper.getWrapperTranslate(axis) – 返回对象容器的变形偏移量，像素为单位。 "translate"/offset (in px). "axis" – 为字符 "x"(横屏) 或 "y" (f直屏)

• mySwiper.setWrapperTranslate(x,y,z) -手动给对象容器设定CSS3的转换数值，单位为像素

• mySwiper.wrapperTransitionEnd(callback,permanent) – 自定义回调函数，在transitionEnd”事件后触发

参数	类型	默认值	例子
speed	number	300	600
eventTarget	string	'wrapper'	'container'
autoplay	number	5000	–
autoplayDisableOnInteraction	boolean	true	false
autoplayStopOnLast	boolean	false	true
mode	string	'horizontal'	'vertical'
loop	boolean	false	true
loopAdditionalSlides	number	0	2
loopedSlides