1

我正在使用左右滑动选项创建一个轮播图片库。目前我有更改页面的 javascript 代码

<!DOCTYPE html>
<head>
      <title>Share QR</title>
        <meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
     <link rel="stylesheet" type="text/css" href="Css/style.css" />
            <link rel="stylesheet" type="text/css" href="Css/Jstyle.css" />
            <link rel="stylesheet" type="text/css" href="Css/jquery.mobile.theme-1.2.0.css" />
             <script type="text/javascript" src="css/jq1.6.2.js"></script>
             <script type="text/javascript" src="Javascript/jquery1.js"></script>
            <script type="text/javascript" src="Javascript/jquery2.js"></script>
    </head>

    <body>
    <script type="text/javascript">
    $(document).on('swipeleft', 'article', function(event){    
        if(event.handled !== true) // This will prevent event triggering more then once
        {    
            var nextpage = $(this).next('article[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', 'article', function(event){   
        if(event.handled !== true) // This will prevent event triggering more then once
        {      
            var prevpage = $(this).prev('article[data-role="page"]');
            if (prevpage.length > 0) {
                $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
            }
            event.handled = true;
        }
        return false;            
    });


    </script>
      <article data-role="page" id="article1">
        <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
          <h1>Articles</h1>
        </div>
        <div data-role="content">
          <img src="images/product_1.png"/>
        </div>
        <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
          <h1>Footer</h1>    
        </div>
      </article>

      <article data-role="page" id="article2">
        <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
          <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
          <h1>Articles</h1>
        </div>
        <div data-role="content">
         <img src="images/product_2.png"/>
        </div>
        <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
          <h1>Footer</h1>
        </div>
      </article>

      <article data-role="page" id="article3">
        <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
          <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
          <h1>Articles</h1>
        </div>
        <div data-role="content">
         <img src="images/ad.png"/>
        </div>
        <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
          <h1>Footer</h1>
        </div>
      </article>

    </body>
    </html>

但我只需要更改图像而不是整个页面。在 Jquery mobile 中是否有任何选项可以做同样的事情？请帮帮我

4

1 回答 1

2

我已经为在同一页面内实现的图像轮播示例编写了最简单的示例。

HTML页面如下

<div data-role="page" id="myImagePage">
    <div data-role="header">
         <h1>Header </h1>

    </div>
    <div id="content">
        <div id="ImageDiv"></div>
    </div>
</div>

和JavaScript将如下

var i = 0;
var imgURL = [];

imgURL.push('http://jquerymobile.com/wp-content/uploads/2013/02/devices.png');
imgURL.push('http://asset1.cbsistatic.com/cnwk.1d/i/tim/2013/02/20/35536085_620x433.jpg');
imgURL.push('http://ctim.saltsidecdn.net/ikman/large/7004d606-4fd0-11e2-8ea2-22000a270a3d.jpg');



$("#myImagePage").swiperight(function () {
    if (i < (imgURL.length - 1)) {
        i++
    } else {
        i = 0;
    }
    var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
    $('#ImageDiv').html(imgStr);   
});
$("#myImagePage").swipeleft(function () {
    if (i > 0) {
        i--
    } else {
        i = (imgURL.length - 1);
    }
    var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
    $('#ImageDiv').html(imgStr);
});

基本上我有一个数组中的图像url，并在用户左右滑动时使用数组并显示图像。

希望这会给你一个良好的开端。

在这里检查一个工作小提琴http://jsfiddle.net/R3bZ8/13/

于 2013-03-05T10:18:30.533 回答