JS实现touch 点击滑动轮播实例代码

废话不多说了，直接给大家贴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 点击滑动轮播实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！