请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
12下一页
返回列表 发新帖
显示全部楼层
7
帖子
0
勋章
337
Y币

从零开始写图片滑动效果

[复制链接]
发表于 2015-7-30 20:20:19
注:该篇文章是学习IDE页面框架page020的总结。

1. 新建html页面
自动生成的代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <title>title</title>
  7.     <link rel="stylesheet" type="text/css" href="api.css"/>
  8.     <style>
  9.         body{

  10.         }
  11.     </style>
  12. </head>
  13. <body>

  14. </body>
  15. <script type="text/javascript" src="api.js"></script>
  16. <script type="text/javascript">
  17.     apiready = function(){

  18.     };
  19. </script>
  20. </html>
复制代码

2. 在body中添加slide,swipe_wrap元素以及几张img图片
  1. <div id='slide' class='swipe'>
  2.     <div class='swipe-wrap' id="banner-content">
  3.         <div onclick="" tapmode="">
  4.             <img src="../image/45.png"/>
  5.         </div>
  6.         <div onclick="" tapmode="">
  7.             <img src="../image/46.png"/>

  8.         </div>
  9.         <div onclick="" tapmode="">
  10.             <img src="../image/47.png"/>
  11.         </div>
  12.         <div onclick="" tapmode="">
  13.             <img src="../image/48.png"/>

  14.         </div>
  15.         <div onclick="" tapmode="">
  16.             <img src="../image/49.png"/>

  17.         </div>
  18.         <div onclick="" tapmode="">
  19.             <img src="../image/50.png"/>

  20.         </div>
  21.     </div>
  22. </div>
复制代码
添加完成后,这几张图片肯定是垂直显示,如下图所示:


3. 设置slide,swipe_wrap以及img的css属性
  1.        .swipe {   
  2.             margin: 0 auto;   
  3.             overflow: hidden;   
  4.             position: relative;   
  5.         }   
  6.    
  7.         .swipe-wrap {   
  8.             overflow: hidden;   
  9.             position: relative;   
  10.         }   
  11.    
  12.         .swipe-wrap > div {   
  13.             float: left;   
  14.             width: 100%;   
  15.             position: relative;   
  16.         }   
  17.    
  18.         .swipe-wrap > div {   
  19.             overflow: hidden;   
  20.             position: relative;   
  21.         }   
  22.    
  23.         .swipe-wrap img {   
  24.             width: 100%;   
  25.             height: auto;   
  26.             max-height: 240px;   
  27.             min-height: 132px;   
  28.             min-width: 320px;   
  29.             max-width: 640px;   
  30.         }   
复制代码
发现,设置完css之后,并没有什么变化,除了max-height限制了高度而已。下面一步就是关键的操作。

4. 添加swipe.js以及initSlide()函数
  1. <script type="text/javascript" src="../script/swipe.js"></script>
  2. <script type="text/javascript">
  3.     apiready = function(){
  4.         initSlide();
  5.     };
  6.    
  7.     function initSlide() {   
  8.         var $pointer = $api.byId('pointer');   
  9.         window.mySlide = Swipe(slide, {   
  10.             continuous: true,   
  11.             disableScroll: true,   
  12.             stopPropagation: true,   
  13.         });   
  14.     }   
  15. </script>
复制代码
奇迹出现了,这个时候只显示一张图片了,而且支持左右滑动。下一步添加就是添加页码显示,知道总共有几页,当前显示的是第几页。

5. 添加pointer的div以及css属性
在slide的div中添加下述代码:
  1.     <div id="pointer">   
  2.         <a class="active"></a>   
  3.         <a></a>   
  4.         <a></a>   
  5.         <a></a>   
  6.         <a></a>   
  7.         <a></a>   
  8.         <a></a>   
  9.     </div>   
复制代码
在style中添加下述代码:
  1.         #pointer {   
  2.             position: absolute;   
  3.             bottom: 12px;   
  4.             overflow: hidden;   
  5.             width: 100%;   
  6.             text-align: center;   
  7.         }   
  8.    
  9.         #pointer a {   
  10.             display: inline-block;   
  11.             width: 6px;   
  12.             height: 6px;   
  13.             border-radius: 6px;   
  14.             margin-right: 4px;   
  15.             background-color: #FFFFFF;   
  16.         }   
  17.    
  18.         #pointer a.active {   
  19.             background-color: #999999;   
  20.         }   
复制代码
这个时候图片底部确实有页码了,但是当滑动图片的时候,页码并没有跟着变化啊。

6. 设置Swipe的callback函数
  1.     function initSlide() {   
  2.         var $pointer = $api.byId('pointer');   
  3.         window.mySlide = Swipe(slide, {   
  4.             continuous: true,   
  5.             disableScroll: true,   
  6.             stopPropagation: true,   
  7.             callback: function (index, element) {   
  8.                 console.log();   
  9.                 var $actA = $api.dom($pointer, 'a.active');   
  10.                 $api.removeCls($actA, 'active');   
  11.                 $api.addCls($api.eq($pointer, index + 1), 'active');   
  12.             }   
  13.         });   
  14.     }  
复制代码
到这里,一个完整的图片滑动效果就完成了。最终效果图如下:
   

注:该插件存在几个缺点,导致使用起来有点困难,推荐使用另外一个功能极其强大的插件:Swiper.js。后面会再开贴使用swiper.js重写。

本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
5
帖子
0
勋章
36
Y币
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>   
复制代码



这个我是最不清楚的,不管添加到哪个位置,运行APP时,都会提示我的那个Pointer有问题。我都不知的为什么.slide的div不就是body的第一行代码就是slide的div???
5
帖子
0
勋章
36
Y币
请问下,就是:
4. 添加swipe.js以及initSlide()函数
5. 添加pointer的div以及css属性
分别添加到哪个地方呢?也就是,像2. 在body中添加slide,swipe_wrap元素以及几张img图片,能说明放在body中,那这两个是放在body,还是style中呢?本人是初学者,对java这类的东西不是很明白,我就想弄这个来试试,从实践中学习,希望您能回答一下,帮帮我。谢谢哈!!!!
5
帖子
0
勋章
36
Y币
我仔细看了,他报错原因主要是因为说  var $pointer = $api.byId('pointer'); 的$api在html文件中没有定义,那该怎么办呢?该如何定义,还是应该如何操作,麻烦您了,指教指教!!!
8
帖子
0
勋章
1万+
Y币
chen培华 发表于 2015-10-22 00:21
我仔细看了,他报错原因主要是因为说  var $pointer = $api.byId('pointer'); 的$api在html文件中没有定义 ...

在报错的 html 文件中引入官方的 api.js 即可
5
帖子
0
勋章
36
Y币
yyyfx 发表于 2015-10-22 08:32
在报错的 html 文件中引入官方的 api.js 即可

怎样引入呢?嘻嘻,我还不怎么会这方面的,就是不知道该怎么引用,麻烦指导下下》》》谢谢哈
8
帖子
0
勋章
1万+
Y币
chen培华 发表于 2015-10-22 22:10
怎样引入呢?嘻嘻,我还不怎么会这方面的,就是不知道该怎么引用,麻烦指导下下》》》谢谢哈
...

如果那个html 在项目的根目录,这样引用就可以了
  1. <script type="text/javascript" src="./script/api.js"></script>
复制代码
如果在 html 文件夹中,这样引用就可以了
  1. <script type="text/javascript" src="../script/api.js"></script>
复制代码
上述 src 中的 . 表示当前目录, .. 表示上一级目录。
当引入不同路径的文件时候,需要根据当前文件相对于目标文件所在目录的层级差异,调整 src 才能保证文件的正确引入。

这些是 HTML & JavaScript 的基础知识,建议自行补完,会减少后续的许多麻烦

5
帖子
0
勋章
36
Y币
yyyfx 发表于 2015-10-23 08:24
如果那个html 在项目的根目录,这样引用就可以了
如果在 html 文件夹中,这样引用就可以了
上述 src 中的 ...

恩恩,我按您的说法弄了,APP没有报错,可是还是没能弄成滑动相册,好纠结。坑内是代码的问题,
谢谢你了哈
0
帖子
0
勋章
4
Y币
怎样引入呢?嘻嘻,我还不怎么会这方面的,就是不知道该怎么引用,麻烦指导下下》》》谢谢哈
0
帖子
0
勋章
12
Y币
楼主能讲下代码的衔接问题吗?
12下一页
您需要登录后才可以回帖 登录

本版积分规则