Fatal编程技术网
  • javascript/
  • Javascript jquery mobile中的旋转木马图像库

Javascript jquery mobile中的旋转木马图像库

javascript jquery jquery-mobile

Javascript jquery mobile中的旋转木马图像库,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我正在使用“左右滑动”选项创建旋转木马图像库。目前，我有javascript代码来更改页面 <!DOCTYPE html> <head> <title>Share QR</title> <meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/> &l

我正在使用“左右滑动”选项创建旋转木马图像库。目前，我有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>


共享QR
$（文档）.on（'swipleft'，'article'，函数（事件）{
if（event.handled！==true）//这将防止事件触发多次
{    
var nextpage=$（this.next（'article[data role=“page”]）；
//如果存在，请使用下一页的id刷卡
如果（下一页长度>0）{
$.mobile.changePage（下一页，{transition:“slide”，reverse:false}，true，true）；
}
event.handled=true；
}
返回false；
});
$（文档）.on（'swiperight'，'article'，函数（事件）{
if（event.handled！==true）//这将防止事件触发多次
{      
var prevpage=$（this.prev（'article[data role=“page”]”）；
如果（prevpage.length>0）{
$.mobile.changePage（prevpage，{transition:“slide”，reverse:true}，true，true）；
}
event.handled=true；
}
返回false；
});
文章
页脚
文章
页脚
但我只需要更改图像，而不是整个页面。在jquerymobile中是否有相同的选项？请帮助我，伙计们

我已经为在同一页面中实现的图像旋转木马示例编写了最简单的示例

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);
});

var i=0；
var imgURL=[]；
推http://jquerymobile.com/wp-content/uploads/2013/02/devices.png');
推http://asset1.cbsistatic.com/cnwk.1d/i/tim/2013/02/20/35536085_620x433.jpg');
推http://ctim.saltsidecdn.net/ikman/large/7004d606-4fd0-11e2-8ea2-22000a270a3d.jpg');
$（“#myImagePage”）.SwiperRight（函数（）{
如果（i<（图长度-1））{
我++
}否则{
i=0；
}
var imgStr=“”；
$（'#ImageDiv'）.html（imgStr）；
});
$（“#myImagePage”）.swipleft（函数（）{
如果（i>0）{
我--
}否则{
i=（imgURL.length-1）；
}
var imgStr=“”；
$（'#ImageDiv'）.html（imgStr）；
});
基本上，我有一个数组中的图像URL，使用该数组并在用户左右滑动时显示图像

希望这能给你一个领先的开始

在这里签出一把工作小提琴

你能给我们看一下HTML吗？我也做了同样的事情，在刷卡时更改页面
背景图像
，然后刷新同一页面。例如，
$（'[data role=page]'）.css（{'background-image'：'img.jpg'}）检查我的最后一个问题。“我很快会给你提供更多的细节。”Ravinder粘贴了html代码bro@omar这在图像库中不太好，因为我想插入左右图像以导航到另一个图像..真棒的人。。非常感谢。我可以为图像导航放置左右图像吗？并且在顶部添加图像计数器？是的，您可以这样做。它需要更多的HTML标记和与滑动相同的逻辑。您可以使用
imgURL.length
显示总计数，变量
i
将返回当前索引。