利用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 相关文章推荐
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 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文件的实现方法
2007/03/19 PHP
php随机输出名人名言的代码
2012/10/07 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
Prototype Function对象 学习
2009/07/12 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
python实现rsa加密实例详解
2017/07/19 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
详解python中init方法和随机数方法
2019/03/13 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
毕业生自我鉴定
2013/11/05 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
2015年科协工作总结
2015/05/19 职场文书
士兵突击观后感
2015/06/16 职场文书
初中体育课教学反思
2016/02/16 职场文书
python 实现的截屏工具
2021/05/08 Python
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏