利用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代码
Oct 09 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
JSONP原理及简单实现
Jun 08 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
TS 类型兼容教程示例详解
Sep 23 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
收集的DedeCMS一些使用经验
2007/03/17 PHP
深入php数据采集的详解
2013/06/02 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
javascript getElementsByTagName
2011/01/31 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
vue实现井字棋游戏
2020/09/29 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
详解Python Socket网络编程
2016/01/05 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
汉语言文学专业自荐信
2014/06/11 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
会计求职简历自我评价
2015/03/10 职场文书
2015中学教学工作总结
2015/07/22 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL