Using Iscroll to implement an infinite loop of focus graphs

Now everyone should have seen the focus of the results of the rotation, the effect of what I do not have screenshots. Practicing yesterday, the practice requirement is to use Iscroll to achieve infinite loop scrolling of the focus graph, and to stop the loop scrolling of the focus graph when the finger touches the focus graph. First Contact Iscroll, modeled on the Iscroll Official document demo, quickly made a focus chart automatic scrolling example, but ... Is...... The problem is, Iscroll's official document does not say how to achieve infinite circulation, not it, there should be, I hold the mentality of suspicion, find AH find, the official article to find several versions, each version has seen 1, 2 times, no ... Really not ... Well, what about it ...? It seems that they can only think, but for a long time have no clue, even iscroll how to use are not familiar. And so on, online great God so many, certainly someone has done, for reference, search, the Niang gave a lot of things, really a lot of dongdong, can ... Is ..., the point opened not one is I need, blog Park Csdn also looked for, the results were not found.





depressed, disappointment, or rely on their own bar, yesterday to Tinker 2, 3 clock, think of the focus diagram in the parent class loop Insert node method and then constantly change the width of the container, try not to succeed, and then think that can constantly change the focus of the margin results are not successful. Yesterday also thought of other methods, of course, the results are the same, if the success of yesterday, there will not be today this blog (lazy). This program is not considered compatible with different screen sizes and needs to be compatible with your own tuning.





1, first say HTML structure, the structure is very simple. In the wrapper is the focus map content.　Focus is the focus of the last one with the first use of the picture is the same jdt1.jpg, this is very important, because to ensure that the focus map smooth always to a direction, two pictures must be the same, the back to see JS you will understand the reason, I choose here is the left scroll. Look at the picture link you should guess I'm the guy from the company, SHH.!!!








<div id= "wrapper" >


<div id= "Scroller" >


<ul id= "Scrollul" >


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150 813/jdt1.jpg "></li>


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150 813/jdt2.jpg "></li>


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150 813/jdt3.jpg "></li>


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150813/ Jdt4.jpg "></li>


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150 813/jdt5.jpg "></li>


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150 813/jdt1.jpg "></li>


</ul>


</div>


</div>


<div id= "Footer" ></div>











 





2, CSS style, CSS is a reference to the official website demo style Inside there are many styles worth learning, especially with the prefix style, I have been doing PC, these styles I was the first contact. It is worth noting that the element to use Iscroll must have a position of absolute. In this example, the #scroller position must be absolute. In addition, it must be explained that my side of the picture size is 350x200, the focus of a total of 6 (the last one is fake purely for automatic scrolling effect added), so the #scroller width of 2100px. #scroller的宽度一旦设置之后, Iscroll will display your focus map According to this width, even if you later use the program to modify the width of #scroller, such as you add an Li tag, and modified the #scroller width of 2450px, But the Iscroll still shows only the width of 2100px, and the excess is bounced back unless you call the Refersh () method to refresh the Iscroll








      *{


-webkit-box-sizing:border-box;


-moz-box-sizing:border-box;


Box-sizing:border-box;


        }


html{


-ms-touch-action:none;


        }


body{


padding:0;


margin:0;


        }


#header {


width:100%;


height:40px;


background: #cd235c;


Text-align:center;


Position:absolute;


top:0px;


left:0px;


Z-index:2;


line-height:40px;


Font-weight:bold;


color: #eee;


        }


#wrapper {


Position:absolute;


top:40px;


left:0px;


bottom:48px;


background: #ccc;


border-top:1px Solid;


z-index:1;


width:100%;


           


Overflow:hidden;


        }


#scroller {


Position:absolute;


width:2100px;


height:100%;


top:0;


left:0;


-WEBKIT-TAP-HIGHTLIGHT-COLOR:RAGB (0,0,0,0);


-webkit-transform:translatez (0);


-moz-transform:translatez (0);


-ms-transform:translatez (0);


-o-transform:translatez (0);


Transform:translatez (0);


-webkit-touch-callout:none;


-webkit-user-select:none;


-moz-user-select:none;


-ms-user-select:none;


-o-user-select:none;


User-select:none;


-webkit-text-size-adjust:none;


-moz-text-size-adjust:none;


-ms-text-size-adjust:none;


-o-text-size-adjust:none;


Text-size-adjust:none;


           


           


        }


#wrapper ul{


List-style-type:none;


margin:0px;


padding:0px;


width:100%;


height:100%;


           


        }


#wrapper li{


width:350px;


height:100%;


Float:left;


        }


#footer {


width:100%;


height:48px;


background: #444;


Position:absolute;


bottom:0px;


left:0px;


Z-index:2;


        }


img{


width:350px;


        }











3. Focus on, JS code, in fact, JS code is very little, but some places need to be flexible, I use the original JS.





3.1 Initializes the Iscroll, allows horizontal scrolling, does not allow vertical scrolling, and when the mouse wheel scrolls, the focus chart slides





var myscroll = new Iscroll ("#wrapper", {scrollx:true,scrolly:false,mousewheel:true});





a function that scrolls automatically with 3.2 focus graphs.





Curleft the scroll offset when the focus graph is scrolled to the left in the initialized variable. Use the loop timer to call Iscroll's Scrollto method to move a focus graph every second, because the picture is 350, so the increment of curleft per second is-350, and when Curleft is-1750, the focus diagram scrolls to the last one, with the emphasis coming, When the focus map arrives at the last one, we use settimeout to cynical, because the focus map is a 1000ms switch to a picture, switching the picture when 200ms remaining 800ms, gave us an opportunity. Using 200ms-1000ms this time, I chose here is 500ms, we reinitialize all the Dongdong, Curleft set to 0; Destroy the original Iscroll object (Myscroll), regenerate a Iscroll object; The code is as follows:








var Curleft=0,timeinterh,timeouth;


Timeinterh=setinterval (function () {


curleft-=350;


if (curleft==-1750) {


timeouth=settimeout (function () {


curleft=0;


Myscroll.destroy ();


myscroll=new iscroll ("#wrapper", {scrollx:true,scrolly:false,mousewheel:true});


},500)


    }


Myscroll.scrollto (curleft,0,200);


},1000)











3.3 When the finger touches the focus graph, the empty timer stops the focus chart to scroll automatically, because now the first picture of the focus diagram is the same as the last picture, in order to avoid the user looking at the focus map to see two identical pictures. We need to hide the last picture. Here is the width of the #scroller set to 5 pictures of the width of 1750px, so that users can not see the last picture, the point is to refresh the iscroll here, or even if you changed the width does not take effect














var find=function (id) {return document.getElementById (ID)}


var sul=find ("Scrollul");


Sul.addeventlistener ("Touchstart", function () {


Find ("Scroller"). Style.width= "1750px";


Myscroll.refresh ();


clearinterval (TIMEINTERH);


cleartimeout (Timeouth);


},false)











Complete JS code is as follows:








var myscroll = new Iscroll ("#wrapper", {scrollx:true,scrolly:false,mousewheel:true});


var Curleft=0,timeinterh,timeouth;


Timeinterh=setinterval (function () {


curleft-=350;


if (curleft==-1750) {


Timeouth=settimeout (function () {


curleft=0;


Myscroll.destroy ();


myscroll=new iscroll ("#wrapper", {scrollx:true,scrolly:false,mousewheel:true});


},500)


            }


Myscroll.scrollto (curleft,0,200);


},1000)


var find=function (id) {return document.getElementById (ID)}


var sul=find ("Scrollul");


Sul.addeventlistener ("Touchstart", function () {


Find ("Scroller"). Style.width= "1750px";


Myscroll.refresh ();


clearinterval (TIMEINTERH);


cleartimeout (Timeouth);


},false)


//Touchmove events should be avoided by causing unnecessary bugs when the finger moves on the focus map


Document.addeventlistener ("Touchmove", function (e) {e.preventdefault ()},false);











complete code for the entire program is as follows:








<html>


<head>


<meta name= "viewport" content= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/ >


<script src= "Http://www1.pcauto.com.cn/test/test/pcauto150811/iscroll.js" ></script>


<style>


        *{


-webkit-box-sizing:border-box;


-moz-box-sizing:border-box;


Box-sizing:border-box;


}


html{


-ms-touch-action:none;


        }


body{


padding:0;


margin:0;


        }


#header {


width:100%;


height:40px;


background: #cd235c;


Text-align:center;


Position:absolute;


top:0px;


left:0px;


Z-index:2;


line-height:40px;


Font-weight:bold;


color: #eee;


        }


#wrapper {


Position:absolute;


top:40px;


left:0px;


bottom:48px;


background: #ccc;


border-top:1px Solid;


z-index:1;


width:100%;


           


Overflow:hidden;


        }


#scroller {


Position:absolute;


width:2100px;


height:100%;


top:0;


left:0;


-WEBKIT-TAP-HIGHTLIGHT-COLOR:RAGB (0,0,0,0);


-webkit-transform:translatez (0);


-moz-transform:translatez (0);


-ms-transform:translatez (0);


-o-transform:translatez (0);


Transform:translatez (0);


-webkit-touch-callout:none;


-webkit-user-select:none;


-moz-user-select:none;


-ms-user-select:none;


-o-user-select:none;


User-select:none;


-webkit-text-size-adjust:none;


-moz-text-size-adjust:none;


-ms-text-size-adjust:none;


-o-text-size-adjust:none;


Text-size-adjust:none;


           


           


        }


#wrapper ul{


List-style-type:none;


margin:0px;


padding:0px;


width:100%;


height:100%;


           


        }


#wrapper li{


width:350px;


height:100%;


Float:left;


        }


#footer {


width:100%;


height:48px;


background: #444;


Position:absolute;


bottom:0px;


left:0px;


Z-index:2;


        }


img{


width:350px;


        }


</style>


</head>


<body>


<div id= "header" > I am the focus chart </div>


<div id= "wrapper" >


<div id= "Scroller" >


<ul id= "Scrollul" >


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150 813/jdt1.jpg "></li>


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150 813/jdt2.jpg "></li>


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150813/ Jdt3.jpg "></li>


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150 813/jdt4.jpg "></li>


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150 813/jdt5.jpg "></li>


<li><img src=http://www.update8.com/web/css3/"http://www1.pcauto.com.cn/test/test/pcauto150 813/jdt1.jpg "></li>


</ul>


</div>


</div>


<div id= "Footer" ></div>


<script>


var myscroll = new Iscroll ("#wrapper", {scrollx:true,scrolly:false,mousewheel:true});


var Curleft=0,timeinterh,timeouth;


Timeinterh=setinterval (function () {


curleft-=350;


if (curleft==-1750) {


Timeouth=settimeout (function () {


curleft=0;


Myscroll.destroy ();


myscroll=new iscroll ("#wrapper", {scrollx:true,scrolly:false,mousewheel:true});


},500)


            }


Myscroll.scrollto (curleft,0,200);


},1000)


var find=function (id) {return document.getElementById (ID)}


var sul=find ("Scrollul");


Sul.addeventlistener ("Touchstart", function () {


Find ("Scroller"). Style.width= "1750px";


Myscroll.refresh ();


clearinterval (TIMEINTERH);


cleartimeout (Timeouth);


},false)


//prohibits touchmove events from causing unnecessary bugs when the finger moves on the focus map


Document.addeventlistener ("Touchmove", function (e) {e.preventdefault ()},false);


</script>


</body>


</html>











Summary: In fact, this if the focus of the rotation function, if not iscroll, directly with the original JS should be more simple, iscroll should have a stronger use of it, slowly feel. Now more and more realize the importance of the algorithm in the program, read the two great "JavaScript Advanced Program Design" and "JavaScript Authority Guide" JavaScript basics of the point is almost seen, the future is important to flexible use, Use a variety of ideas to organize their own rough procedures, the road long its repair far XI, I will be up and down and searching. Learn more and work hard, and you will have a result.





PS: Above I said Dongdong, perhaps the great God has done without sharing, or the great God thought is tricks and disdain gu, but for me this little shrimp, every little progress is very important, haha.

Two-dimensional code is the effect link: