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

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

下载后解压：



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

下面是其中效果：

使用方法

1：引入jq库

<script src="js/jquery-1.10.1.min.js"></script>

2：引入Swiper文件：

<script src="../dist/idangerous.swiper.min.js"></script>

3：引入Swipe基本样式：

<link rel="stylesheet" href="../dist/idangerous.swiper.css">

4：写入html：

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
<div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
</div>
</div>

4.1：比较完整的html：

<div class="device">
<a class="arrow-left" href="#"></a>  左右箭头
<a class="arrow-right" href="#"></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="img/slider1-1.png"> </div> 轮播图片
<div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
<div class="swiper-slide">
<div class="content-slide">  轮播图片上的内容
<p class="title">Slide with HTML</p>
<p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
</div>
</div>
</div>
</div>
<div class="pagination"></div> 分页
</div>

5:写入js初始化插件：

<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})
</script>

补充：我在网上找了一些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	number	1	2
slidesPerView	number or 'auto'	1	4
slidesPerViewFit	boolean	true	false
slidesPerGroup	number	1	2
calculateHeight	boolean	false	true
roundLengths	boolean	false	true
cssWidthAndHeight	boolean	false	true
updateOnImagesReady	boolean	true	false
releaseFormElements	boolean	true	false
watchActiveIndex	boolean	false	true
visibilityFullFit	boolean	false	true
autoResize	boolean	true	false
resizeReInit	boolean	false	true
DOMAnimation	boolean	true	false
resistance	boolean or '100%'	true	false
noSwiping	boolean	false	true
preventLinks	boolean	true	false
preventLinksPropagation	boolean	false	true
initialSlide	number	2	0
useCSS3Transforms	boolean	true	false
Free Mode and Scroll Container
freeMode	boolean	false	true
freeModeFluid	boolean	false	true
scrollContainer	boolean	false	true
momentumRatio	number	1	2
momentumBounce	boolean	true	false
momentumBounceRatio	number	1	2
Slides offset
centeredSlides	boolean	false	true
offsetPxBefore	number	0	100
offsetPxAfter	number	0	100
offsetSlidesBefore	number	0	2
offsetSlidesAfter	number	0	2
Touch/mouse interactions
touchRatio	number	1	0.8
simulateTouch	boolean	true	false
onlyExternal	boolean	false	true
followFinger	boolean	true	false
grabCursor	boolean	false	true
shortSwipes	boolean	true	false
longSwipesRatio	number	0.5	0.3
moveStartThreshold	number	false	100
swipeToNext	boolean	true	false
swipeToPrev	boolean	true	false
Navigation
keyboardControl	boolean	false	true
mousewheelControl	boolean	false	true
mousewheelControlForceToAxis	boolean	false	true
分页
pagination	string or HTML Element	–	'.my-pagination'
paginationClickable	boolean	false	true
paginationAsRange	boolean	true
createPagination	boolean	true	false
Namespace
wrapperClass	string	'swiper-wrapper'	'my-wrapper'
slideClass	string	'swiper-slide'	'my-slide'
slideActiveClass	string	'swiper-slide-active'	'my-active-slide'
slideVisibleClass	string	'swiper-slide-visible'	'my-visible-slide'
slideElement	string	'div'	'li'
noSwipingClass	string	'swiper-no-swiping'	'stop-swiping'
paginationElement	string	'span'	'div'
paginationElementClass	string	'swiper-pagination-switch'	'my-switch'
paginationActiveClass	string	'swiper-active-switch'	'my-active-switch'
paginationVisibleClass	string	'swiper-visible-switch'	'my-visible-switch'
回调
queueStartCallbacks	boolean	false	true
queueEndCallbacks	boolean	false	true
onFirstInit	function	–	function(swiper){ do something }
onInit	function	–	function(swiper){ do something }
onSwiperCreated	function	–	function(swiper){ do something }
onTouchStart	function	–	function(swiper){ do something }
onTouchMove	function	–	function(swiper){ do something }
onTouchEnd	function	–	function(swiper){ do something }
onSlideReset	function	–	function(swiper){ do something }
onSlideChangeStart	function	–	function(swiper, direction){ do something }
onSlideChangeEnd	function	–	function(swiper, direction){ do something }
onSlideNext	function	–	function(swiper){ do something }
onSlidePrev	function	–	function(swiper){ do something }
onSlideClick	function	–	function(swiper){ do something }
onSlideTouch	function	–	function(swiper){ do something }
onImagesReady	function	–	function(swiper){ do something }
onMomentumBounce	function	–	function(swiper){ do something }
onResistanceBefore	function	–	function(swiper,p){ do something }
onResistanceAfter	function	–	function(swiper,p){ do something }
onSetWrapperTransition	function	–	function(swiper, duration){ do something }
onSetWrapperTransform	function	–	function(swiper, transform){ do something }

网上的一个列子：

$(document).ready(function(){
var mySwiper = new Swiper('.swiper-container',{
mode:'vertical',
speed: 600,    onSlideChangeStart: function(swiper){
alert('Hello 1');
}
});
});

资源下载

http://download.csdn.net/detail/qianqianyixiao1/8751233