|
注:该篇文章是学习IDE页面框架page020的总结。
1. 新建html页面
自动生成的代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
- <title>title</title>
- <link rel="stylesheet" type="text/css" href="api.css"/>
- <style>
- body{
- }
- </style>
- </head>
- <body>
- </body>
- <script type="text/javascript" src="api.js"></script>
- <script type="text/javascript">
- apiready = function(){
- };
- </script>
- </html>
复制代码
2. 在body中添加slide,swipe_wrap元素以及几张img图片
- <div id='slide' class='swipe'>
- <div class='swipe-wrap' id="banner-content">
- <div onclick="" tapmode="">
- <img src="../image/45.png"/>
- </div>
- <div onclick="" tapmode="">
- <img src="../image/46.png"/>
- </div>
- <div onclick="" tapmode="">
- <img src="../image/47.png"/>
- </div>
- <div onclick="" tapmode="">
- <img src="../image/48.png"/>
- </div>
- <div onclick="" tapmode="">
- <img src="../image/49.png"/>
- </div>
- <div onclick="" tapmode="">
- <img src="../image/50.png"/>
- </div>
- </div>
- </div>
复制代码 添加完成后,这几张图片肯定是垂直显示,如下图所示:
3. 设置slide,swipe_wrap以及img的css属性
- .swipe {
- margin: 0 auto;
- overflow: hidden;
- position: relative;
- }
-
- .swipe-wrap {
- overflow: hidden;
- position: relative;
- }
-
- .swipe-wrap > div {
- float: left;
- width: 100%;
- position: relative;
- }
-
- .swipe-wrap > div {
- overflow: hidden;
- position: relative;
- }
-
- .swipe-wrap img {
- width: 100%;
- height: auto;
- max-height: 240px;
- min-height: 132px;
- min-width: 320px;
- max-width: 640px;
- }
复制代码 发现,设置完css之后,并没有什么变化,除了max-height限制了高度而已。下面一步就是关键的操作。
4. 添加swipe.js以及initSlide()函数
- <script type="text/javascript" src="../script/swipe.js"></script>
- <script type="text/javascript">
- apiready = function(){
- initSlide();
- };
-
- function initSlide() {
- var $pointer = $api.byId('pointer');
- window.mySlide = Swipe(slide, {
- continuous: true,
- disableScroll: true,
- stopPropagation: true,
- });
- }
- </script>
复制代码 奇迹出现了,这个时候只显示一张图片了,而且支持左右滑动。下一步添加就是添加页码显示,知道总共有几页,当前显示的是第几页。
5. 添加pointer的div以及css属性
在slide的div中添加下述代码:
- <div id="pointer">
- <a class="active"></a>
- <a></a>
- <a></a>
- <a></a>
- <a></a>
- <a></a>
- <a></a>
- </div>
复制代码 在style中添加下述代码:
- #pointer {
- position: absolute;
- bottom: 12px;
- overflow: hidden;
- width: 100%;
- text-align: center;
- }
-
- #pointer a {
- display: inline-block;
- width: 6px;
- height: 6px;
- border-radius: 6px;
- margin-right: 4px;
- background-color: #FFFFFF;
- }
-
- #pointer a.active {
- background-color: #999999;
- }
复制代码 这个时候图片底部确实有页码了,但是当滑动图片的时候,页码并没有跟着变化啊。
6. 设置Swipe的callback函数:
- function initSlide() {
- var $pointer = $api.byId('pointer');
- window.mySlide = Swipe(slide, {
- continuous: true,
- disableScroll: true,
- stopPropagation: true,
- callback: function (index, element) {
- console.log();
- var $actA = $api.dom($pointer, 'a.active');
- $api.removeCls($actA, 'active');
- $api.addCls($api.eq($pointer, index + 1), 'active');
- }
- });
- }
复制代码 到这里,一个完整的图片滑动效果就完成了。最终效果图如下:
注:该插件存在几个缺点,导致使用起来有点困难,推荐使用另外一个功能极其强大的插件:Swiper.js。后面会再开贴使用swiper.js重写。
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|