关闭

基于JQuery的Swiper插件实现移动手机端幻灯片切换(可在每一张幻灯片div中插入自定义的元素,代码简介,扩展性好。)

标签: Swiper切换幻灯片Query移动端
3900人阅读 评论(0) 收藏 举报
分类:

想在移动端做一个简洁的类似幻灯片切换的功能,在网上找了很多幻灯片的切换插件,功能太多了而且不好用。只要简简单单的左右切换就可以啦。如下图所示:

1、幻灯片部分要是div的,以便于在里面添加元素。


2、只要简简单单的两个部分,一个是幻灯片的div部分,还有就是底部中间的几个圆点,表示当前切换到了哪一张。不想要其它例如定时切换和左右两边几个按钮的功能。


实现的代码如下:

HTML部分:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<title></title>
		<link rel="stylesheet" href="css/swiper/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="css/swiper/style.css">
	</head>

	<body>
		<div class="zzsc-container">
			<div class="container" style="height: 25vh;">
				<div class="row">
					<div class="col-md-12">
						<!-- Swiper -->
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide">幻灯片 1</div>
								<div class="swiper-slide">幻灯片 2</div>
								<div class="swiper-slide">幻灯片 3</div>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-pagination"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/swiper/swiper.min.js"></script>
		<!-- Initialize Swiper -->
		<script>
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				paginationClickable: true
			});
		</script>
	</body>

</html>

CSS部分:

style.css自定义文件为

body {
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
}

.links {
	padding: 8px;
	background-color: #52b529;
	margin: 5px;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.links a {
	color: #fff;
	display: inline-block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.links:hover {
	background-color: #1e824c;
}

.current {
	background-color: #22a7f0;
}

.swiper-container {
	width: 500px;
	max-width: 100%;
	height: 300px;
	max-height: 100%;
	margin: 20px auto;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

就两个地方需要自定义而已,简单干净。


Demo以及包含的js,html,css文件下载地址:

http://download.csdn.net/detail/u014175572/9536538

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

15款创建漂亮幻灯片的 jQuery 插件

1. Skippr Skippr 是一个超级简单的 jQuery 幻灯片插件。只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了。S...
  • scholar_man
  • scholar_man
  • 2015-07-16 13:58
  • 1624

swiper滑动实现幻灯片功能及swiper animate的动画特效

怎么实现手机滑动实现幻灯效果呢?目前网上有很多插件可以实现,本人选了一款非常不错的插件swiper.js,原因有很多,当然这款插件最符合项目的需要。所以在此推荐给大家。            ...
  • sundasheng44
  • sundasheng44
  • 2015-05-19 09:42
  • 14310

TouchSlider 实现(PC及移动端触摸界面)的幻灯slider效果

TouchSlider是一个轻量级的javascript组件,设计的目的是提供一个可以方便实现全平台(PC及移动端触摸界面)的幻灯slider效果。近期开发触屏版网站的滑动选择菜单功能,对比了网上的一...
  • jimjack2013
  • jimjack2013
  • 2015-11-24 10:47
  • 2073

jQuery移动手机端幻灯片插件Swiper(可在每一张幻灯片div中插入自定义的元素,代码简洁,扩展性好。)

  • 2016-05-31 15:29
  • 62KB
  • 下载

jQuery移动手机端幻灯片插件Swiper

  • 2016-05-31 15:35
  • 782KB
  • 下载

jQuery响应式手机端移动端幻灯片图片切换特效插件slick

使用方法   1、引入文件 link rel="stylesheet" href="style/slick.css"> script src="script/jquery.mi...
  • jinkingliao
  • jinkingliao
  • 2016-04-18 09:54
  • 1462

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

今天为大家推荐一款支持多种设备(移动端,平板,pc端)的滑块幻灯片插。我测试的是ie7. 下载后解压: aa
  • qianqianyixiao1
  • qianqianyixiao1
  • 2015-05-29 12:36
  • 1042

jQuery.slidizle可完全自定义的响应式jQuery幻灯片插件

  • 2016-01-29 15:31
  • 844KB
  • 下载

【示例代码】3D旋转图片立体展示jquery幻灯片插件(附源码)

此Jquery插件实现了3D旋转图片立体展示幻灯片插件,功能非常酷。有兴趣的同学可以试着做一下。   包括了以下功能:   1、可支持鼠标滚轮控制图片360度旋转   2、鼠标支持左右方向控制按...
  • cmcc_ude
  • cmcc_ude
  • 2013-05-15 14:03
  • 1085

超酷的相册、幻灯片多种图片展示(自动切换)jquery插件thumbox.rar

  • 2013-06-10 17:41
  • 529KB
  • 下载
    个人资料
    • 访问:592567次
    • 积分:5358
    • 等级:
    • 排名:第5906名
    • 原创:39篇
    • 转载:100篇
    • 译文:3篇
    • 评论:36条