I won’t say much nonsense, I will just post the js code to you. The specific code is as follows:
<script src="../js/jquery-1.8."></script> <script src="../js/-1.3."></script> ----------------------Need applicationjquery .mobileBaidu .num-zcon{ overflow: hidden; width:auto; height: 12.5em; } .num-container1 { height: 12.5em; background: url("icons/effect-img/")no-repeat; background-size: cover; display:block; } .num-container2 { height: 12.5em; background: url("icons/effect-img/")no-repeat; background-size: cover; display:none; } .num-container3 { height: 12.5em; background: url("icons/effect-img/")no-repeat; background-size: cover; display:none; } .num-container4 { height: 12.5em; background: url("icons/effect-img/")no-repeat; background-size: cover; display:none; } .num-container5 { height: 12.5em; background: url("icons/effect-img/")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" > </div> <div class="num-container2" > </div> <div class="num-container3" > </div> <div class="num-container4" > </div> <div class="num-container5" > </div> <div class="num-float ub ub-ac ub-pc"> <div class="num-a" > </div> <div class="num-kong"> </div> <div class="num-a" > </div> <div class="num-kong"> </div> <div class="num-a" > </div> <div class="num-kong"> </div> <div class="num-a" > </div> <div class="num-kong"> </div> <div class="num-a" > </div> </div> </div> <script> //Banner ad; var Nownumber = 1;//1 picture; var Maxnumber = 5;//Total number; function show() { for (var i = 1; i <= Maxnumber; i++) { if (Nownumber == i) { ("adv" + Nownumber). = 'block'; ("ab" + Nownumber). = 1; } else { ("adv" + i). = 'none'; ("ab" + i). = 0.5; ("adv" + i). = "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>
The above is the example code for implementing touch and click sliding carousel introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!