swiper插件的基本应用

最新推荐文章于 2025-05-31 20:13:02 发布

原创最新推荐文章于 2025-05-31 20:13:02 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swiper #javascript #html #ViewUI

swiper插件专栏收录该内容

0 篇文章

订阅专栏

本文档详细介绍了Swiper插件的基本配置选项及其用途，并通过示例代码展示了如何实现循环播放、自动切换、图片延迟加载等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[quote][size=x-large]这是我自己边学习边整理的swiper插件的部分配置选项，都是基本的，附上了自己的注释，应该可以看得懂的，不懂就Q我（1035040092）他这个插件有中文文档，http://www.swiper.com.cn/api/start/2014/1218/140.html，自己登陆也能看，他这个完整的我从头看到尾，说实话并不是很易懂，我是秉着会用就行的原则，精通也没时间研究，以下是个人整理，可能有些地方理解不到位，请多包涵，帮忙指出，着重说一点当你登录那个网址看到回电函数以下的时候，坚持看下去，虽然很无聊很简单，相信很多人可以用到，以下代码仅供学习,下面有完整的包,就这样[/size][/quote]


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
		<script type="text/javascript" src="js/swiper-3.4.2.min.js" ></script>
		<style>
			.swiper-container {
		   	 	width: ;
		   	 	height: 490px;
			}
			.swiper-wrapper{
				/*transition-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1)*/
			}
		</style>
	</head>
	<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background: orange;" data-hash="slid1"data-history="mamaipi">Slide 1
        <img src="img/z404.jpg" class="data-lazy" />
        </div>
        <div class="swiper-slide" style="background: orangered;height:490px" data-hash="slid2" data-history="mamaipi2">slider 2
        	<div style="width: 50%;margin: 0 auto;padding: 0;position: relative;">
        		<img src="img/z423.jpg" style="width: 100%;" />
        		<div style="width: 100%;height: 60px;position: absolute;bottom: 0;background: black;opacity: 0.7;">  
        		</div>

        	</div>
        </div>
        <div class="swiper-slide" style="background: yellow;" data-hash="slid3"data-history="mamaipi3">
        	<div class="swiper-zoom-container"> <img src="img/z423.jpg"></div>
        <!--	<div class="swiper-container1">
    			<div class="swiper-wrapper">
		        	<div class="swiper-slide" style="width: 100%;background: pink;">3-1</div>
		        	<div class="swiper-slide" style="width: 100%;background: deeppink;">3-2</div>
		        	<div class="swiper-slide" style="width: 100%;background: hotpink;">3-3</div>
        		</div>-->
    		</div>
    </div>	
        <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>
    <div class="swiper-scrollbar"></div>

</div>
		<script>        
  var mySwiper = new Swiper ('.swiper-container',{
    //举例为上下滑动，默认为horizontal(水平滑动)
	loop : true,//默认false   true为最后一张无缝过渡到第一张         ********这个属性放到最前面1或2的位置  较靠后的位置报错，就试了几个你们可以测测 ,
	//initialSlide : 1,//索引值    打开后第一次显示的界面  0为默认的第一个界面。以此类推
  	speed : 2000,//滑动速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
  	autoplay : 1000,//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。也可在某个div上单独设置停留时间<div class="swiper-slide" data-swiper-autoplay="2000"></div>
    //autoplayDisableOnInteraction : true,//用户操作swiper之后是否会停止自动切换,默认true(停止) false(无视用户操作依旧按照自动切换的时间间隔进行切换)*********跟上面的loop冲突,建议保留loop即可，因为这个的默认属性符合用户操作,所以不用写
	grabCursor : true,//设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。默认 false  *****与autoplay冲突  (二选其一，视情况舍去)
	//parallax : true,//视差效果  这个没做     参照网上swiper的API文档就ok
	hashnav : true,//每个slide 记得加一个data-hash属性   页面效果不改变   改变的是URL 比如加之前是...index.html  加上之后变成index.html#slid1或2或3
	//hashnavWatchState:true,//开启后当URL的锚链接发生变化时控制slide切换（hashnav也要在开启状态）。URL控制slide的切换  ******** hashnav这个必须加上
	//history : 'lovve',//这个必须放服务器里面 本地的就可以,  地址全部手写会报错(比如127.0.0.1/文件夹名/index.html/lovve/mamaipi3),刷新也会报错   你只能写 127.0.0.1/文件夹名/index.html,手动切换或者自动切换才会改变地址,感觉就是弄个复杂一点的假地址 没多大卵用(当然这是我的看法，关于刷新的问题中文网api有一个2bi给了个解释“需要预先设定好同样内容的页面”,我只想说那是个装逼犯，从头到尾都有它的解答，仔细看日期还不是说边学边装逼从头装到尾，是他妈不分时间几乎每天都来，写到这忍不住就骂他 草) 
  	//replaceState:true,//跟hashave相同
  	//setWrapperSize :true,//不知道这个有啥用  百度没找到 你们可以找找
  	//virtualTranslate : true,//个人感觉没用  没必要看
  	//height : window.innerHeight  //全屏高度没测出来  css高度我去掉了
  	//roundLengths :true,//默认false  将slide的宽四舍五入 比如 你一个层宽是75%     屏幕分辨率*75% 恰好有小数 那就四舍五入 具体用处我举一例，我遇到过:仅供参考(我有一个百分比宽和不设置高的层 里面放了一个style为100%的图片  就是图片响应，再在图片的同级做一个100%宽 10%高 0.8的黑透层 上面是图片的说明，position:absolute;bottom:0;这么写是ok的，确实定位在了图片上   层的最下面，但是随着放大缩小屏幕由于宽是百分比，高也是随着图片高变的，图片的高会出现小数   但是外面的层的高不会出现小数 会舍去   这样就冲突了子元素比父级还大0.几像素，那么那个黑透的bottom就不是0了  是0.几，就会在下面留白边。看不明白手痒的你们亲测吧。本文亲测感觉没卵用的，以上举例是我做项目是遇到的 可能是我的bug,但是还是拿出来分享一下)
  	//autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化,也是没啥用 顺便整理了
	pagination : '.swiper-pagination',//几个slide几个小圆点 
	//paginationType : 'progress',  	
	paginationClickable :true,//上面的小圆点点击可跳转
	prevButton:'.swiper-button-prev',//左按钮
	nextButton:'.swiper-button-next',//右按钮
	scrollbar:'.swiper-scrollbar',//设置滚动条
	scrollbarHide:false,//滚动条不隐藏   默认是true隐藏
	scrollbarDraggable : true ,//允许拖动滚动条 默认false
	scrollbarSnapOnRelease : true ,//释放滚动条自动贴合
	keyboardControl : true,//设置为true时，能使用键盘方向键控制slide滑动。
	//mousewheelForceToAxis : true,//与下一个放一起使用 鼠标滑轮控制slide垂直方向的滑动     记得设置滚屏方向为垂直
	mousewheelControl : true,
    mousewheelReleaseOnEdges : true,//与上一个放一起用  鼠标滑轮控制左右方向的滑动
	//lazyLoading : true,//设为true开启图片延迟加载  img标签要加一个class="data-lazy"
	//lazyLoadingInPrevNext : true,//设置为true允许将延迟加载应用到最接近的slide的图片（前一个和后一个slide
	lazyLoadingOnTransitionStart : true,//默认false当过渡到slide后开始加载图片，如果你想在过渡一开始就加载，设置为true
	zoom:true,//点击图片放大  例子在slide3 <div class="swiper-zoom-container"> <img src="path/to/image"> </div>
	zoomToggle :false,//设置为false，不允许双击缩放，只允许手机端触摸缩放。

})

  </script>
	</body>
</html>