Javascript 手指滑动时使div为绝对值_Javascript_Jquery_Html_Css_Touch

Javascript 手指滑动时使div为绝对值

javascript jquery html css

Javascript 手指滑动时使div为绝对值,javascript,jquery,html,css,touch,Javascript,Jquery,Html,Css,Touch,我在我的代码中使用了touchwipe。我有一个#myimageflow div，其中包含12个图像和一个div 当我滑动时，我只想滑动图像，div不应移动 $("#myImageFlow").swipe({ swipe:function(event, direction, distance, duration, fingerCount) { if(direction == 'left') { my.MouseWheel.handle(-1);

我在我的代码中使用了touchwipe。我有一个

#myimageflow div

，其中包含12个图像和一个div

当我滑动时，我只想滑动图像，

div

不应移动

$("#myImageFlow").swipe({
    swipe:function(event, direction, distance, duration, fingerCount) {
        if(direction == 'left') {
            my.MouseWheel.handle(-1);
        } else if (direction == 'right') {
            my.MouseWheel.handle(1);
        }
    }
});

HTML代码：：

岛国


var imgArr=新数组（）；
var imgFront=新数组（）；
var i=1；
var n=0；
var backimg=新数组（）；
var frontimg=新数组（）；
var clickEnabled=true；
$（文档）.ready（函数（）{
/*从XML文件读取数据*/
$.ajax({
键入：“获取”，
url:“photos.xml”，
数据类型：“xml”，
成功：函数（xml）{
$（xml）.find（'item'）.each（function（）{
var path=$（this.attr（'path'）；
var width=$（this.attr（'width'）；
var height=$（this.attr（'height'）；
var id=$（this.attr（'id'）；
var alt=$（this.attr（'alt'）；
var longdesc=$（this.find（'longdesc'）.text（）；
var description=$（this.find（'desc'）.text（）；
$（'#myImageFlow'）。附加（''）；
imgArr[i]=描述；
imgFront[i]=longdesc；
backimg[i]=longdesc；
frontimg[i]=路径；
i=i+1；
});
}
});
/* ===================================== */
//$（“#myImageFlow”）.show（）；
$.getScript（'js/iSlider.js'）；
$.getScript（'js/code.photoswip.jquery-3.0.5.js'）；
$.getScript（'js/touchwipe.js'）；
});
岛国
这是前面

O.O不可理解的问题（？）我不明白你在说什么。你能说清楚点吗？你想做什么？嗯。。是您的内容图像吗？@DaGLiMiOu我只想刷图像而不是div…您可能还应该提供HTML代码。为什么不呢？如果你不这样做，你要做的是改变你的html内容从你的div与新的，应该出现在前面。我的意思是，如果我在

img1.png

并且想切换到

img2.png

，你必须做一些类似

$（''div1'）.html（$（'div2'）.html（）），直到您将所有照片都放置到新位置。我认为这不是很有用
    <!-- CSS  -->
    <link rel="stylesheet" href="css/style.css" type="text/css" /> 
    <link rel="stylesheet" href="css/iSlider.css" type="text/css" />


    <!-- JS  -->
    <!--<script type="text/javascript" src="js/iSlider.js"></script> -->
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <!--<script type="text/javascript" src="js/jquery-1.7.1.js"></script>-->
    <!--<script type="text/javascript" src="js/jquery.js"></script>-->
    <script type="text/javascript" src="js/jquery.ui.touch-punch.js"></script>
    <script type="text/javascript" src="js/jquery-css-transform.js"></script>   
    <script type="text/javascript" src="js/rotate3Di.js"></script>
    <script type="text/javascript" src="js/klass.min.js"></script>


    <script type="text/javascript">
    var imgArr = new Array();
    var imgFront=new Array();
    var i = 1;
    var n=0;
    var backimg=new Array();
    var frontimg=new Array();
    var clickEnabled = true;
  $(document).ready(function () {

  /*   Reading the data from XML file*/

        $.ajax({
            type: "GET",
            url: "photos.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('item').each(function(){
                    var path = $(this).attr('path');
                    var width = $(this).attr('width');
                    var height = $(this).attr('height');
                    var id = $(this).attr('id');
                    var alt = $(this).attr('alt');
                    var longdesc = $(this).find('longdesc').text();
                    var description = $(this).find('desc').text();
                    $('#myImageFlow').append('<img src="'+path+'" id='+id+'  height="'+height+'"  width="'+ width+'" longdesc="'+longdesc+'" alt="'+alt+'"/>');
                    imgArr[i] = description;
                    imgFront[i]=longdesc;                   
                    backimg[i]=longdesc;
                    frontimg[i]=path;
                    i = i+1;

                });

            }
        });



  /* ===================================== */
  //$("#myImageFlow").show();
  $.getScript('js/iSlider.js');
  $.getScript('js/code.photoswipe.jquery-3.0.5.js');
  $.getScript('js/touchSwipe.js');  


        });

</head>
<body style="background-image:url('img/Mesh2.png');background-repeat:no-repeat; background-size: cover; width=:'100%'">
    <h1>iSlider</h1>

    <div id="header">

    </div>
    <div id="container">
    <div id="center" class="column">        


    <!-- This is all the XHTML ImageFlow needs -->
    <div id="myImageFlow" class="imageflow">
        <div id="front">Initialy This is Front  </div>
    </div>



</div>
    <div id="left" class="column">

    </div>
   <div id="right" class="column">

   </div>
   </div>
  <div id="footer">

  </div>


</body>
</html>