Using iscroll4 to implement the example code of carousel graph effect

Preface

Iscroll was born mainly because neither previous iPhone, IPOD, Android or earlier mobile webkits provided a native way to support scrolling content in a container of fixed height. I believe that many people, like me, only know that they can slide manually when using iscroll, and don’t know how to implement the carousel of iscroll. So the following is a carousel effect I made, which is effective in personal testing;

1. HTML code, of course, you can dynamically add the following small dots

<div >
 <div >
  <ul >
   <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 >
 <div  onclick="('prev', 0);return false">&larr; prev</div>
 <ul >
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>
 <div  onclick="('next', 0);return false">next &rarr;</div>
</div>

2. CSS code

<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 >  {
 background: #888;
}
#indicator > li:last-child {
 margin: 0;
}
</style>

3. js code (I used jquery to test it here, you can also choose other libraries according to your preferences)

&lt;script src="js/"&gt;&lt;/script&gt;
&lt;script src="js/"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
 var myScroll;
 var timer;
 var i=0;
 var obj=$('#wrapper');
 var obj_w=(true);
 var oli=('li');
 var oli_l=;
 (obj_w);
 $('#scroller').width(oli_l*obj_w);
 function loaded() {
  myScroll = new iScroll('wrapper', {
   snap: true,
   momentum: false,
   hScrollbar: false,
   onScrollEnd: function () {
    ('#indicator &gt; ').className = '';
    ('#indicator &gt; li:nth-child(' + (+1) + ')').className = 'active';
   },
   onBeforeScrollStart:function(){
    clearInterval(timer);
    },
   onTouchEnd:function(){
    timer=setInterval(gund,2000);
    i=
    },
   });

 timer=setInterval(gund,2000); 
 function gund(){ //Scroll every 5 seconds   i++;
   
   if(i==oli_l){
    i=0;
    (0, 0, 1000); //Click back to the first page   } else {
    ('next', 0);
   };
   =i
  }; 
 
};
('DOMContentLoaded', loaded, false);
&lt;/script&gt;

Needless to say, html and css are both experts, mainly js. First, initialize, and then modify the corresponding code according to the API provided by iscorll. Here, we mainly use the three events of onBeforeScrollStart, onScrollEnd, and onTouchEnd. At the same time, we combine scrollToPage() and currPageX events to make corresponding timing modifications. After sliding, we synchronize the number of pages that automatically scroll, which is OK. In fact, writing this is mainly to be familiar with the API. . .

Summarize

The above is the entire content of this article. I hope that the content of this article will be of some help to everyone’s learning or using iscorll. If you have any questions, you can leave a message to communicate.