JS implementation touch Click Slide carousel instance code, jstouch

JS implementation touch Click Slide carousel instance code, jstouch

If you don't talk much about it, paste the js Code directly. The specific code is as follows:

<Script src = ".. /js/jquery-1.8.3.min.js "> </script> <script src = ".. /js/jQuery. mobile-1.3.2.min.js "> </script> ---------------------- need to apply jquery. mobile Baidu. 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-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> <script> // Banner Advertisement; var Nownumber = 1; // Figure 1; var Maxnumber = 5; // The total number; 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 = "1 s" ;}}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 section describes the JS implementation code of touch Click Slide carousel. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!