iscroll4 捕捉元素开发手机焦点图滑动效果

html标准代码格式

 1     <div id="wrapper">
 2         <div id="scroller" >
 3             <ul id="thelist">
 4                 <li><img src="img/showpic_1.jpg"/></li>
 5                 <li><img src="img/showpic_2.jpg"/></li>
 6                 <li><img src="img/showpic_3.jpg"/></li>
 7                 <li><img src="img/showpic_4.jpg"/></li>
 8                 <li><img src="img/showpic_2.jpg"/></li>
 9             </ul>
10         </div>
11     </div>

JS实现

var myScroll;

            function loaded() {
                scallFun();
            }

            function scallFun(){
                myScroll = new iScroll(‘wrapper‘, {
                    snap: true,
                    momentum: false,
                    hScrollbar: false,
                    bounce: true,
                    onTouchEnd:function(){
                        if(myScroll.x <= -1280)
                        {//判断是否到最后一张图片 最后张返回第一张
                            myScroll.scrollTo(0,0,1000);
                            myScroll.destroy();
                            scallFun();
                        }
                    },
                    onScrollEnd: function () {
},
                    onScrollStart: function () {
                        console.log(myScroll.x)
                    }
                  });
            }

        document.addEventListener(‘DOMContentLoaded‘, loaded, false);

wrapper的高度因为子元素position设置而为0，解决方法

window.onload = function(){
    $("#wrapper").css(‘height‘,$("#scroller").height());//初始化高度
}

这里不能用jquery.ready()方法去修改高度。

wrapper高度自适应，代码如下

window.onresize = function(){
                $("#wrapper").css(‘height‘,$("#scroller").height());//自适应高度
}