利用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 相关文章推荐
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
vue配置接口域名方法总结
May 12 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 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
Zerg兵种介绍
2020/03/14 星际争霸
PHP date函数参数详解
2006/11/27 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
javascript的BOM汇总
2015/07/16 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
python将音频进行变速的操作方法
2020/04/08 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
巴西世界杯32强口号
2014/06/05 职场文书
会计学习心得体会
2014/09/09 职场文书
小学运动会开幕词
2015/01/28 职场文书
护士岗前培训心得体会
2016/01/08 职场文书