javascript - 在图像上滑动

Question

我有这个代码可以在页面之间滑动，我的内容是一个简单的图像。

问题是我无法在图像上滑动，只能在标题和图像之间的指定区域中滑动。

但我也想在图像上滑动到下一页。

我该如何解决这个问题？需要帮助

我的 HTML5 代码:

<div data-role="page" id="p1">
    <div data-role="header" data-theme="a" data-position="fixed" data-id="footer">                      
  <h1>2013</h1>
    </div>
    <div data-role="content">
        <img src="imagens/HomePrincipal.jpg"/>
    </div>
    <div data-role="footer" data-position="fixed" data-id="footer">                  
   <h1>Footer</h1>
    </div>
  </div>

  <div data-role="page" id="p2">
    <div data-role="header" data-position="fixed" data-id="footer">                     
  <a href="#p1" data-icon="home" data-iconpos="notext">Home</a>
        <h1>2013</h1>
    </div>
    <div data-role="content">
        <img src="imagens/PrototipoAlternativo2.jpg"/>
    </div>
    <div data-role="footer" data-position="fixed" data-id="footer">              
     <h1>Footer</h1>
    </div>
  </div>

JavaScript:

$(document).on('swipeleft', '[data-role="page"]', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $(this).next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '[data-role="page"]', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

CSS master.css:

.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
}
#test img{position:absolute;z-index:-1}

样板.css:

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

我使用jquery.mobile.1.2.0.min.css

Answer 1

(无法评论..)也许图像位于 div 之上？在图像上设置一个较低的 css z-index，然后在 swipediv 上设置一个较低的 css z-index，以便您可以到达它？