Posted in Javascript onJanuary 19, 2017
废话不多说了,直接给大家贴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 点击滑动轮播实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
JS实现touch 点击滑动轮播实例代码
- Author -
叫我多多酱声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@