利用iscroll4实现轮播图效果实例代码


Posted in Javascript onJanuary 11, 2017

前言

iscroll之所以会诞生,主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。相信很多人和我一样,在使用iscroll的是时候只知道可以手动滑动,不知道iscroll的轮播怎么实现,那么以下就是我做的一个轮播效果,亲测有效;

一、html代码,当然可以动态添加下面的小圆点

<div id="wrapper">
 <div id="scroller">
  <ul id="thelist">
   <li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li>
   <li><strong>2.</strong> <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li>
   <li><strong>3.</strong> <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li>
   <li><strong>4Zeroth Law:</strong> <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li>
  </ul>
 </div>
</div>
<div id="nav">
 <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">← prev</div>
 <ul id="indicator">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>
 <div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next →</div>
</div>

二、css代码

<style type="text/css" media="all">
body, ul, li {
 padding: 10px;
 margin: 0;
}
body {
 font-size: 12px;
 -webkit-user-select: none;
 -webkit-text-size-adjust: none;
 font-family: helvetica;
}
#wrapper {
 width:100%;
 height: 160px;
 float: left;
 position: relative; /* On older OS versions "position" and "z-index" must be defined, */
 z-index: 1;   /* it seems that recent webkit is less picky and works anyway. */
 overflow: hidden;
 background: #aaa;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 border-radius: 10px;
 background: #e3e3e3;
}
#scroller {
 /*width: 2100px;*/
 height: 100%;
 float: left;
 padding: 0;
}
#scroller ul {
 list-style: none;
 display: block;
 float: left;
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 text-align: left;
}
#scroller li {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 display: block;
 float: left;
 /*width: 300px;*/
 height: 160px;
 text-align: center;
 font-family: georgia;
 font-size: 18px;
 line-height: 140%;
}
#nav {
 width:100%;
 float: left;
}
#prev, #next {
 float: left;
 font-weight: bold;
 font-size: 14px;
 padding: 5px 0;
 width: 80px;
}
#next {
 float: right;
 text-align: right;
}
#indicator, #indicator > li {
 display: block;
 float: left;
 list-style: none;
 padding: 0;
 margin: 0;
}
#indicator {
 width: 110px;
 padding: 12px 0 0 30px;
}
#indicator > li {
 text-indent: -9999em;
 width: 8px;
 height: 8px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -o-border-radius: 4px;
 border-radius: 4px;
 background: #ddd;
 overflow: hidden;
 margin-right: 4px;
}
#indicator > li.active {
 background: #888;
}
#indicator > li:last-child {
 margin: 0;
}
</style>

三、js代码(这里我用的jquery 做的测试,你也可以根据自己的喜好选择其他库)

<script src="js/jquery.js"></script>
<script src="js/iscrollc.js"></script>
<script type="text/javascript">
 var myScroll;
 var timer;
 var i=0;
 var obj=$('#wrapper');
 var obj_w=obj.outerWidth(true);
 var oli=obj.find('li');
 var oli_l=oli.length;
 oli.outerWidth(obj_w);
 $('#scroller').width(oli_l*obj_w);
 function loaded() {
  myScroll = new iScroll('wrapper', {
   snap: true,
   momentum: false,
   hScrollbar: false,
   onScrollEnd: function () {
    document.querySelector('#indicator > li.active').className = '';
    document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
   },
   onBeforeScrollStart:function(){
    clearInterval(timer);
    },
   onTouchEnd:function(){
    timer=setInterval(gund,2000);
    i=myScroll.currPageX
    },
   });

 timer=setInterval(gund,2000); 
 function gund(){ //每5秒滚动
   i++;
   
   if(i==oli_l){
    i=0;
    myScroll.scrollToPage(0, 0, 1000); //滚回第一页
   } else {
    myScroll.scrollToPage('next', 0);
   };
   document.title=i
  }; 
 
};
document.addEventListener('DOMContentLoaded', loaded, false);
</script>

html 和css不用说,都是行家,主要是js,首先是初始化,再根据iscorll提供的API修改相应的代码,这里主要用刀onBeforeScrollStart,onScrollEnd,onTouchEnd这三个事件,同时结合scrollToPage(),currPageX事件进行对应的定时修改,滑动之后同步自动滚动的页数,就ok了,其实写这个主要是熟悉API。。。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用iscorll能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
微信小程序input抖动问题的修复方法
Mar 03 Javascript
详解js前端代码异常监控
Jan 11 #Javascript
Vue数据驱动模拟实现3
Jan 11 #Javascript
jQuery实现判断控件是否显示的方法
Jan 11 #Javascript
jQuery Form表单取值的方法
Jan 11 #Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 #Javascript
浅谈JavaScript中promise的使用
Jan 11 #Javascript
JS多文件上传的实例代码
Jan 11 #Javascript
You might like
php通过COM类调用组件的实现代码
2012/01/11 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
javascript中创建对象的几种方法总结
2013/11/01 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
司法局火灾防控方案
2014/06/05 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
会议主持人开场白台词
2015/05/28 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers