时间:2021-05-25
前言
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; z-index: 1; overflow: hidden; background: #aaa; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; background: #e3e3e3;}#scroller { 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; 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能带来一定的帮助,如果有疑问大家可以留言交流。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序利用css实现遮罩效果实例详解实现效果图:如图所示,使用css实现小程序的遮罩效果,代码如下js文件代码://index.js//获取应用实例vara
概要iScroll4这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Andro
本文实例为大家分享了Android实现背景图片轮播的具体代码,供大家参考,具体内容如下点击按钮实现图片轮播效果实践案例:xmlJavapackagecom.ex
本文实例讲述了Android开发实现的自动换图片、轮播图效果。分享给大家供大家参考,具体如下:50行代码急速实现轮播图:先看效果:两个例子没太大区别,不过i是布
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下需求:自动轮播,鼠标移入轮播停止、移出继续,小圆点点击切图,左右箭头切图效果图:![轮播图]思