废话不多说了，直接给大家贴js代码了，具体代码如下所示：

<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>

以上所述是小编给大家介绍的JS实现touch 点击滑动轮播实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！