利用iscroll4实现轮播图效果实例代码

  • Z时代
  • 2024-01-10
  • 分类：综合

前言

iscroll之所以会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。相信很多人和我一样，在使用iscroll的是时候只知道可以手动滑动，不知道iscroll的轮播怎么实现，那么以下就是我做的一个轮播效果，亲测有效；

一、html代码,当然可以动态添加下面的小圆点

<div id="wrapper">
 <div id="scroller">
  <ul id="thelist">
   <li><span>1.</span> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li>
   <li><span>2.</span> <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><span>3.</span> <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><span>4Zeroth Law:</span> <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>

二、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。。。

总结

以上是 利用iscroll4实现轮播图效果实例代码 的全部内容， 来源链接： utcz.com/z/320430.html

回到顶部