废话不多说了，直接给大家贴js代码了，具体代码如下所示：
<script src="https://www.jb51.net/js/jquery-1.8.3.min.js"></script> <script src="https://www.jb51.net/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> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </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 点击滑动轮播实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: