Swipe的一个例子

H5去年异军突起,在手机屏幕上大行其道,今年的势头怕会有过之而无不及。
今天拿swipe这个JS库练练手。


步骤:

  1. 添加页面的主体部分代码
    <div id='slider' class='swipe'> <div class='swipe-wrap'> <div>这里填写你要展示的文字或者图片</div> <div></div> <div></div> </div> </div>

  2. 添加script语句(做好添加到页面的最后,保证所有的元素已经加载完成)
    <script > window.slider = Swipe(document.getElementById('slider'), { startSlide: 0, speed: 300, auto: 4000, continuous: false, disableScroll: false, stopPropagation: false, //回调函数,每张页面加载完成后执行 callback: function(index, elem) { //alert(elem); }, //所有页面显示完成后执行 transitionEnd: function(index, elem) { if(index == 6){ setTimeout(function(){ alert("2015 is Loading,Write Something..."); },4000); } } }); </script>

  3. 增加css样式
    .swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float:left; width:100%; position: relative; }

效果图:

2015-01-16_154007.png
2015-01-16_154033.png
2015-01-16_154044.png
2015-01-16_154107.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,841评论 1 92
  • 总是有很多事情困扰着我们,杂七杂八的,包括不得不做的事情,包括自己想做的事情,包括与人相处,也包括与己相处。...
    半夏当归农阅读 345评论 0 0
  • 晨起四顾,天高云淡,朗日悬天; 余神定气闲,欣然如厕; 厕所本有一老者打扫,彼系极其负责和干净的一族;他刚刚...
    秋思枫醉阅读 330评论 0 0
  • 公司需求不得不去摸索开发iOS的AR扫描功能!期间不断的碰壁,好在终于搞定了 开发入手的是视+SDK,视+的app...
    子小每文阅读 977评论 0 1
  • 我在某个清晨醒来,阳光正好的窗外,微风渺渺,混合着独特的气息,树叶沙沙作响,我就那么的想起了你,我的树先生。这一年...
    3dafd90caf21阅读 385评论 0 0