移动端选项卡切换带每一步的解析

最新推荐文章于 2023-03-26 10:33:54 发布

1登峰造极

最新推荐文章于 2023-03-26 10:33:54 发布

阅读量867

点赞数

分类专栏： html css js

本文链接：https://blog.csdn.net/qq_33323469/article/details/84071255

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

19 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

**直接复制运行前提你的引进需要的东西
**
请使用Swiper3.x

**效果图如下**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20181114180811220.png)
<!DOCTYPE html>
<html>
	<head>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<title>Swiper选项卡</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				border: 0;
				font-family: "微软雅黑";
			}
			h1{
				font-family: "led";
				color: green;
			}
			.list {
				width: 100%;
				height: 40px;
				background: #f8f8f8;
			}
			
			.list ul li {
				width: 25%;
				height: 100%;
				float: left;
				list-style: none;
			}
			
			.list ul li p {
				width: 100%;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}
			
			.list ul li .active {
				border-bottom: 1px solid red;
				color: red;
				font-weight: bold;
			}
			
			.swiper-container {
				width: 100%;
				margin: 5px auto;
			}
			
			.swiper-container .swiper-slide {
				width: 100%;
				height: 500px;
			     overflow: hidden;
			}
			.swiper-container .swiper-slide p{
				font-size: 22px;
				line-height: 41px;
				padding: 5px 19px;
			}
		</style>
	</head>

	<body>
		<h1>下面使用的都是Swiper3.x方法及其函数请下载对应的版本</h1>
		<div class="list">
			<ul class="tabs">
				<li>
					<p class="active">在线演示</p>
				</li>
				<li>
					<p>中文教程</p>
				</li>
				<li>
					<p>获取Swiper</p>
				</li>
				<li>
					<p>API 文档</p>
				</li>
			</ul>
		</div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<p>
					Swiper3.x基础测试包Swiper基本实现，仅供参考
					swiper-3.4.2完整压缩包包含Swiper3的基础演示和js、css文件，Swiper3的最后一个版本
					swiper-3.4.2.min.js单个的Swiper的js文件
					swiper-3.4.2.jquery.min.js如果你的页面加载了jQuery.js或者zepto.js，可以使用这个版本的Swiper，更轻量
					swiper-3.4.2.min.css单个的Swiper的css文件
					swiper.animate1.0.2.min.jsSwiper动画js
					animate.min.cssSwiper动画CSS
					animate.cssanimate.css的无压缩文件
					jquery-1.10.1.min.js
					zepto.min.js
					</p>
				</div>
				<div class="swiper-slide">
					<p>
						1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
						导航等组件可以放在container之外
						3.你可能想要给Swiper定义一个大小，当然不要也行。
						.swiper-container {
						    width: 600px;
						    height: 300px;
						}  
						4.初始化Swiper：最好是挨着标签
						5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。现在开始添加各种选项和参数丰富你的Swiper，开启华丽移动前端创作之旅
					</p>
				</div>
				<div class="swiper-slide">
					<p>
						https://3.swiper.com.cn/download/index.html
						点击下载相应的文档
						Swiper3.x基础测试包Swiper基本实现，仅供参考
						swiper-3.4.2完整压缩包包含Swiper3的基础演示和js、css文件，Swiper3的最后一个版本
						swiper-3.4.2.min.js单个的Swiper的js文件
						swiper-3.4.2.jquery.min.js如果你的页面加载了jQuery.js或者zepto.js，可以使用这个版本的Swiper，更轻量
						swiper-3.4.2.min.css单个的Swiper的css文件
						swiper.animate1.0.2.min.jsSwiper动画js
						animate.min.cssSwiper动画CSS
						animate.cssanimate.css的无压缩文件
						jquery-1.10.1.min.js
						zepto.min.js
					</p>
				</div>
				<div class="swiper-slide">
					<p>
						Swiper3.x的全部配置选项、方法、函数
						Swiper初始化
						Basic（Swiper一般选项）
						Progress（进度）
						Free Mode （free模式/抵抗反弹）
						Slides grid (网格分布)
						Effects (切换效果)
						Clicks (点击)
						Touches(触发条件)
						Swiping / No swiping(禁止切换)
						Pagination（分页器）
						Navigation Buttons（前进后退按钮）
						Scollbar（滚动条）
						Keyboard / Mousewheel (鼠标、键盘控制选项)
						Images (图片选项)
						Loop (环路)
						Zoom (调焦)
						Controller (双向控制)
						Observer （监视器）
						Callbacks （回调函数）
						Namespace （命名空间）
						Properties （Swiper属性）
						Methods （Swiper方法）
					</p>
				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript">
	var mySwiper = new Swiper('.swiper-container', {
		//回调函数，swiper从当前slide开始过渡到另一个slide时执行
		onSlideChangeStart: function() {
			//加载的时候第一个li的p标签上加了active，所以当我们触发这个函数的时候就需要移除下面的active样式
			$('.list .active').removeClass('active');
			//swiper滑动时下标对应li的下标
			$(".tabs li p").eq(mySwiper.activeIndex).addClass('active');
			//打印下标
			console.log(mySwiper.activeIndex)
		}
	})

	$('.tabs li').on('click', function(e) {
		//获取点击的下标
		var index = $(this).index();
		//阻止元素发生默认的行为
		e.preventDefault();
		//移除第一个默认样式
		$(".tabs .active").removeClass('active');
		//Swiper切换到指定slide。
		mySwiper.slideTo(index, 1000, false);
		//点击谁给谁添加样式
		$(this).find('p').addClass('active');
	})
</script>

1登峰造极

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端选项卡切换带每一步的解析

**直接复制运行前提你的引进需要的东西**请使用Swiper3.x**效果图如下**![在这里插入图片描述](https://img-blog.csdnimg.cn/20181114180811220.png)&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta content="width=device-width, i...
复制链接

扫一扫