JS实现touch 点击滑动轮播实例代码
废话不多说了，直接给大家贴js代码了，具体代码如下所示：
<scriptsrc="../js/jquery-1.8.3.min.js"></script>
<scriptsrc="../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:0auto;
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;
}
----------
<divclass="num-zcon">
<divclass="num-container1"id="adv1">
</div>
<divclass="num-container2"id="adv2">
</div>
<divclass="num-container3"id="adv3">
</div>
<divclass="num-container4"id="adv4">
</div>
<divclass="num-container5"id="adv5">
</div>
<divclass="num-floatubub-acub-pc">
<divclass="num-a"id="ab1">
</div>
<divclass="num-kong">
</div>
<divclass="num-a"id="ab2">
</div>
<divclass="num-kong">
</div>
<divclass="num-a"id="ab3">
</div>
<divclass="num-kong">
</div>
<divclass="num-a"id="ab4">
</div>
<divclass="num-kong">
</div>
<divclass="num-a"id="ab5">
</div>
</div>
</div>
<script>
//横幅广告；
varNownumber=1;//1图；
varMaxnumber=5;//总个数；
functionshow(){
for(vari=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点击滑动轮播实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！