iscroll4实现轮播图效果

相信很多人和我一样，在使用iscroll的是时候只知道可以手动滑动，不知道iscroll的轮播怎么实现一下就是我做的一个轮播效果，亲测有效；

1.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">&larr; 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 &rarr;</div>

</div>

2.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>

3.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。。。