利用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 相关文章推荐
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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调用Java对象的方法
2006/10/09 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
JavaScript 继承详解(二)
2009/07/13 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
python中requests和https使用简单示例
2018/01/18 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python接入支付宝的实例操作
2020/07/20 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
餐饮收银员岗位职责
2014/02/07 职场文书
校园公益广告语
2014/03/13 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
英文投诉信格式
2015/07/03 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
Python图片处理之图片裁剪教程
2021/05/27 Python