ISCROLL4 capture Element Development mobile phone focus graph Slide effect

HTML Standard Code format

1     <DivID= "wrapper">2         <DivID= "Scroller" >3             <ulID= "Thelist">4                 <Li><imgsrc= "Img/showpic_1.jpg"/></Li>5                 <Li><imgsrc= "Img/showpic_2.jpg"/></Li>6                 <Li><imgsrc= "Img/showpic_3.jpg"/></Li>7                 <Li><imgsrc= "Img/showpic_4.jpg"/></Li>8                 <Li><imgsrc= "Img/showpic_2.jpg"/></Li>9             </ul>Ten         </Div> One     </Div>

JS implementation

varMyscroll; functionloaded () {scallfun (); }                        functionScallfun () {Myscroll=NewIscroll (' wrapper ', {snap:true, Momentum:false, HScrollbar:false, Bounce:true, Ontouchend:function(){                        if(Myscroll.x <=-1280)                        {//determine if the last picture is returned to the first oneMyscroll.scrollto (0,0,1000);                            Myscroll.destroy ();                        Scallfun (); }}, Onscrollend:function() {}, Onscrollstart:function() {Console.log (myscroll.x)}}); } document.addeventlistener (' domcontentloaded ', Loaded,false);

The height of the wrapper is 0 because the child element position is set, and the workaround

function () {    $ ("#wrapper"). CSS (' height ', $ ("#scroller"). Height ());   Initialize Height }

You cannot use the Jquery.ready () method to modify the height.

Wrapper highly adaptive, the code is as follows

function () {                $ ("#wrapper"). CSS (' height ', $ ("#scroller"). Height ());  Adaptive Height }

ISCROLL4 capture Element Development mobile phone focus graph Slide effect