【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

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

原创 2016年05月31日 15:26:29

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

jQuery实现可自动切换的幻灯片效果插件代码

jQuery实现可自动切换的幻灯片效果插件代码 1. 用户快速划过按钮时不触发鼠标事件; 2. 鼠标划入当前图片按钮时不闪烁; 3. 简化并优化代码. 使用方法就不详述了, 请参见源码及相关注释 $.fn.ifadeslide = function(iset){ /* * iset可选参数说明: * iset.field==>幻灯区域内的图片集 * iset.ico==>按钮钩子 * iset.high==>按钮高亮样式 * iset.interval==>图片切换时间 * iset.leavetime==>不触发鼠标划入事件的最大时间值

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

使用方法   1、引入文件 link rel="stylesheet" href="style/slick.css"> script src="script/jquery.mi...

jquery实现图片幻灯片切换代码

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;     &lt;title&gt;&lt;/title&gt;     &lt;script type="text/javascript" src="jquery-1.2.

jQuery适合移动设备触摸屏的响应式幻灯片插件

插件介绍 flickity是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。该幻灯片插件可以设置多种显示效果,可以自动播放,是一款移动优先的jQuery幻灯片插件。 ...

Jquery KinSlideshow自定义幻灯片,焦点图效果

<a style="color: #009999; text-decoration: underline;" href="http://www.co

jQuery适合移动设备触摸屏的响应式幻灯片插件

flickity是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。该幻灯片插件可以设置多种显示效果,可以自动播放,是一款移动优先的jQuery幻灯片插件。  你可以将该幻灯片插...

利用jQuery中的bgstretcher插件制作幻灯片效果背景

通过jQuery插件制作幻灯片效果的网页背景

jquery 自定义插件(操作table、编辑table、表头拖动、隔行换色等.....),可按需求配置,在加一个可拖动的DIV代码

open-open.com 看到N多老外写的插件 于是今天看了下jquery文档也自己来两个,献丑啦! 需求: 一:操作table 1、无侵入式可编辑 2、隔行换色 3、拉动表头,自定义宽度 4、可编辑 5、编辑后的数据颜色区分 5、css文件自己定义,无需和插件绑定,这样更加灵活 6、一切可配置 1:名字就叫bestTable 二:拖动div 万恶的IE6,在自定义的js文件中有时候加备注会让IE6报错,我非常蛋疼,可能是中文注释的原因所以键盘事件的代码取消了注释,一切正常,只要在一写备注ie6就运行不了,

Jquery插件我来实现之滑动幻灯片一(转自buhutuu.cn)

最近在研究GAE,所以jquery这边就没怎么更新。这些天在工作里需要用到幻灯片效果,所以就用了我在buhutuu首页中用的那个jquery插件。这个插件还是相当好用的,不过我要在好几个页面里面用到,...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)