您的位置：首页 > 移动开发

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

2016-05-31 15:26 1136 查看

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航