JS实现touch 点击滑动轮播实例代码

<script src="../js/jquery-1.8.3.min.js"></script><script src="../js/jQuery.mobile-1.3.2.min.js"></script>----------------------需要应用jquery .mobile自行百度.num-zcon{  overflow: hidden;  width:auto;  height: 12.5em;}.num-container1 {    height: 12.5em;    background: url("icons/effect-img/13.png")no-repeat;        background-size: cover;    display:block;  }.num-container2 {   height: 12.5em;    background: url("icons/effect-img/15.png")no-repeat;        background-size: cover;      display:none;  }  .num-container3 {    height: 12.5em;    background: url("icons/effect-img/177.png")no-repeat;        background-size: cover;      display:none;  }  .num-container4 {    height: 12.5em;    background: url("icons/effect-img/18.png")no-repeat;        background-size: cover;      display:none;  }  .num-container5 {    height: 12.5em;    background: url("icons/effect-img/19.png")no-repeat;    background-size: cover;    display:none;  }  .num-float{    height:1em;    margin:0 auto;    z-index: 3;    text-align:center;    margin-top: -1.35em;  }  .num-a{    background:#ffffff;    height: 0.4375em;    width: 0.4375em;    border-radius: 50%;    float: left;    opacity: 0.5;  }   .num-kong{    height: 0.625em;    width: 0.25em;    float: left;  }  .num-kong-width{    width: auto;    height: 0.9375em;  }  .num-kong-win{    height: 0.625em;    width: 0.1em;    float: left;  }----------<div class="num-zcon">  <div class="num-container1" id="adv1">  </div>  <div class="num-container2" id="adv2">  </div>  <div class="num-container3" id="adv3">  </div>  <div class="num-container4" id="adv4">  </div>  <div class="num-container5" id="adv5">  </div>  <div class="num-float ub ub-ac ub-pc">    <div class="num-a" id="ab1">    </div>    <div class="num-kong">    </div>    <div class="num-a" id="ab2">    </div>    <div class="num-kong">    </div>    <div class="num-a" id="ab3">    </div>    <div class="num-kong">    </div>    <div class="num-a" id="ab4">    </div>    <div class="num-kong">    </div>    <div class="num-a" id="ab5">    </div>  </div></div><script>  //横幅广告；  var Nownumber = 1;//1图；  var Maxnumber = 5;//总个数；  function show() {    for (var i = 1; i <= Maxnumber; i++) {      if (Nownumber == i) {        document.getElementById("adv" + Nownumber).style.display = 'block';        document.getElementById("ab" + Nownumber).style.opacity = 1;      }      else {        document.getElementById("adv" + i).style.display = 'none';        document.getElementById("ab" + i).style.opacity = 0.5;        document.getElementById("adv" + i).style.transition = "1s";      }    }    if (Nownumber == Maxnumber) {      Nownumber = 1;    }    else {      Nownumber++;    }  }  theTime = setInterval('show()', 5000);</script><script>$(document).on("pageinit","#pageone",function(){ $("#adv1").on("swiperight",function(){  $(this).hide();  Nownumber=5;  $("#adv5").show(); });    $("#adv5").on("swiperight",function(){  $(this).hide();  Nownumber=4;  $("#adv4").show(); });  $("#adv4").on("swiperight",function(){  $(this).hide();  Nownumber=3;  $("#adv3").show(); });  $("#adv3").on("swiperight",function(){  $(this).hide();  Nownumber=2;  $("#adv2").show(); });  $("#adv2").on("swiperight",function(){  $(this).hide();  Nownumber=1;  $("#adv1").show(); });  $("#adv1").on("swipeleft",function(){  $(this).hide();  Nownumber=2;  $("#adv2").show();  }); $("#adv2").on("swipeleft",function(){  $(this).hide();  Nownumber=3;  $("#adv3").show();  }); $("#adv3").on("swipeleft",function(){  $(this).hide();  Nownumber=4;  $("#adv4").show();  }); $("#adv4").on("swipeleft",function(){  $(this).hide();  Nownumber=5;  $("#adv5").show();  }); $("#adv5").on("swipeleft",function(){  $(this).hide();  Nownumber=1;  $("#adv1").show();});});</script>