在JavaScript中模拟iPhone主屏幕幻灯片

我想在Safari/Chrome/Firefox上用JavaScript模仿iPhone主屏幕

我说的模仿是指： -有几页 -通过单击并拖动/用鼠标滑动在页面之间切换 -让iPhone主屏幕底部的点显示它是哪一页

最接近我想要的是：

---

但是滑动的效果不如iPhone（我必须先滑动，松开鼠标按钮后会出现动画），底部没有点。

我使用jQuery&jQuery.slide-0.4.3.js解决了这个问题

jQuerySlide会在每个页面之间自动滑动，所以我必须添加一个鼠标事件（onMouseDrag）来停止自动滑动并对用户做出反应。它工作得很好

这就是我添加到jSlide中的内容

var jSlide = function(element, options)
    {


    element = $(element);

    $('ul.layers li', element).sliderDisableTextSelect();

    // my code here

    var dragging = false;
    var srcX;
    var offsetX;
    var diff; 



    this.manualDown = function(event) {
       dragging = true;
       srcX = event.pageX;
       offsetX =  parseFloat($('ul.layers li', element).css('marginLeft'));

       obj.settings.easing = "easeOutExpo";

       if(obj.settings.loopNr != null) {
           obj.toggleLoop(0);
       };



       return false;
    };

    this.manualMove = function(event) {     
       if (dragging) {
           diff = event.pageX - srcX;
           $('ul.layers li', element).css('marginLeft',(offsetX+diff)+'px');
           console.log((offsetX+diff)+'px');
       };           
       return false;
    };

    this.manualUp = function(event) {
      if (dragging) {
        dragging = false;


        if ((diff<-obj.settings.layerWidth/5) && (obj.settings.slidePos<obj.settings.layersSize-1)) {
            obj.slideTo(parseInt(obj.settings.slidePos)+1);
        } else if ((diff>obj.settings.layerWidth/5) && (obj.settings.slidePos>0)) {
            obj.slideTo(parseInt(obj.settings.slidePos)-1);
        } else { // if not slid far enough nor is it the last slide 
            obj.slideTo(obj.settings.slidePos);
        };
      };
    };

    this.manualLeave = function(event) {
      if (dragging) {
        dragging = false;

        if ((diff<0) && (obj.settings.slidePos<obj.settings.layersSize-1)) {
            obj.slideTo(parseInt(obj.settings.slidePos)+1);
        } else if ((diff>0) && (obj.settings.slidePos>0)) {
            obj.slideTo(parseInt(obj.settings.slidePos)-1);
        } else { // if it's the last slide 
            obj.slideTo(obj.settings.slidePos);
        };
      };

    };


    element.mousedown(this.manualDown);
    element.mousemove(this.manualMove);
    element.mouseup(this.manualUp);
    element.mouseleave(this.manualLeave);

---

我不确定是否所有的代码都是必需的。。。粘贴到jquery.slide后，您可能仍然需要对其进行调整，但应该可以开始了。

我使用jquery&jquery.slide-0.4.3.js解决了这个问题

jQuerySlide会在每个页面之间自动滑动，所以我必须添加一个鼠标事件（onMouseDrag）来停止自动滑动并对用户做出反应。它工作得很好

这就是我添加到jSlide中的内容

var jSlide = function(element, options)
    {


    element = $(element);

    $('ul.layers li', element).sliderDisableTextSelect();

    // my code here

    var dragging = false;
    var srcX;
    var offsetX;
    var diff; 



    this.manualDown = function(event) {
       dragging = true;
       srcX = event.pageX;
       offsetX =  parseFloat($('ul.layers li', element).css('marginLeft'));

       obj.settings.easing = "easeOutExpo";

       if(obj.settings.loopNr != null) {
           obj.toggleLoop(0);
       };



       return false;
    };

    this.manualMove = function(event) {     
       if (dragging) {
           diff = event.pageX - srcX;
           $('ul.layers li', element).css('marginLeft',(offsetX+diff)+'px');
           console.log((offsetX+diff)+'px');
       };           
       return false;
    };

    this.manualUp = function(event) {
      if (dragging) {
        dragging = false;


        if ((diff<-obj.settings.layerWidth/5) && (obj.settings.slidePos<obj.settings.layersSize-1)) {
            obj.slideTo(parseInt(obj.settings.slidePos)+1);
        } else if ((diff>obj.settings.layerWidth/5) && (obj.settings.slidePos>0)) {
            obj.slideTo(parseInt(obj.settings.slidePos)-1);
        } else { // if not slid far enough nor is it the last slide 
            obj.slideTo(obj.settings.slidePos);
        };
      };
    };

    this.manualLeave = function(event) {
      if (dragging) {
        dragging = false;

        if ((diff<0) && (obj.settings.slidePos<obj.settings.layersSize-1)) {
            obj.slideTo(parseInt(obj.settings.slidePos)+1);
        } else if ((diff>0) && (obj.settings.slidePos>0)) {
            obj.slideTo(parseInt(obj.settings.slidePos)-1);
        } else { // if it's the last slide 
            obj.slideTo(obj.settings.slidePos);
        };
      };

    };


    element.mousedown(this.manualDown);
    element.mousemove(this.manualMove);
    element.mouseup(this.manualUp);
    element.mouseleave(this.manualLeave);

我不确定是否所有的代码都是必需的。。。很可能在粘贴到jquery.slide之后，您仍然需要对其进行调整，但这应该可以让您开始