支持移动端原生js轮播图
直接上代码，自行复制粘贴，本人是新手，欢迎指正。
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<title>轮播图</title>
<metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"name="viewport"/>
<styletype="text/css">
.container{
width:500px;
height:400px;
overflow:hidden;
margin:50pxauto;
position:relative;
}
.list{
width:2500px;
height:400px;
position:absolute;
left:0px;
}
.listimg{
float:left;
height:400px;
width:500px;
}
.buttons{
position:absolute;
width:75px;
height:20px;
bottom:10px;
left:50%;
margin-left:-38px;
z-index:2;
}
.buttonsspan{
width:10px;
height:10px;
margin-right:5px;
display:inline-block;
border-radius:5px;
background-color:gray;
opacity:0.5;
cursor:pointer;
}
.buttons.on{
background-color:rgb(255,50,50);
opacity:0.8;
}
.arrow{
position:absolute;
background-color:gray;
opacity:0.5;
height:40px;
width:40px;
color:#fff;
text-decoration:none;
line-height:40px;
font-size:28px;
font-weight:800;
text-align:center;
}
#prev{
top:50%;
left:10px;
margin-top:-20px;
}
#next{
top:50%;
right:10px;
margin-top:-20px;
}
</style>
</head>
<body>
<divid="container"class="container">
<divid="list"class="list">
<imgsrc="1.jpg">
<imgsrc="2.jpg">
<imgsrc="3.jpg">
<imgsrc="4.jpg">
<imgsrc="5.jpg">
</div>
<divid="buttons"class="buttons">
<spanindex="0"class="on"></span><!--
--><spanindex="1"></span><!--
--><spanindex="2"></span><!--
--><spanindex="3"></span><!--
--><spanindex="4"></span>
</div>
<ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"id="prev"class="arrow"><</a>
<ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"id="next"class="arrow">></a>
</div>
<scripttype="text/javascript">
window.onload=function(){
varcontainer=document.getElementById('container');
varlist=document.getElementById('list');
varbuttons=document.getElementById('buttons');
varbuttonsItem=buttons.getElementsByTagName('span');
varprev=document.getElementById('prev');
varnext=document.getElementById('next');
varindex=0;
varstartX=0;
varendX=0;
container.addEventListener('touchend',function(event){
if(event.changedTouches.length==1&&this.getAttribute('disabled')!='disabled'){
vartouch=event.changedTouches[0];
endX=touch.pageX;
varoffset=endX-startX;
console.log(offset);
if(Math.abs(offset)>=50){
if(offset<0){//右滑
nextMethod();
}else{
prevMethod();
}
}
}
});
container.addEventListener('touchmove',function(){
event.preventDefault();
})
container.addEventListener('touchstart',function(event){
if(event.targetTouches.length==1&&this.getAttribute('disabled')!='disabled'){
vartouch=event.targetTouches[0];
startX=touch.pageX;
}
})
prev.addEventListener('click',function(){
if(this.getAttribute('disabled')=='disabled'){
returnfalse;
}
prevMethod();
});
next.addEventListener('click',function(){
if(this.getAttribute('disabled')=='disabled'){
returnfalse;
}
nextMethod();
});
for(vari=0;i<buttonsItem.length;i++){
buttonsItem[i].onclick=function(){
if(this.getAttribute('disabled')=='disabled'){
returnfalse;
}
vari=this.getAttribute('index');
varlength=Math.abs((i-index)*500);
vardirection='right';
if(length<0){
direction='left';
}
index=i;
document.getElementsByClassName('on')[0].setAttribute('class','');
buttonsItem[index].className='on';
animate(direction,1,length);
}
}
functionprevMethod(){
if(index==0){
index=4;
animate('right',40,2000);
}else{
index--;
animate('left',1,500);
}
document.getElementsByClassName('on')[0].setAttribute('class','');
//buttonsItem[index].setAttribute('class','on');
buttonsItem[index].className='on';
}
functionnextMethod(){
if(index==4){
index=0;
animate('left',40,2000);
}else{
index++;
animate('right',1,500);
}
document.getElementsByClassName('on')[0].setAttribute('class','');
buttonsItem[index].className='on';
}
functionanimate(direction,speed,length){
varend=length/speed;
varcount=0;
for(vari=0;i<end;i++){
setTimeout(function(){
count++;
varleft=list.offsetLeft;
if(direction=='right'){
left-=speed;
}else{
left+=speed;
}
list.style.left=left+'px';
if(count<end-1){
disabledButtons();
}else{
resumeButtons();
}
},speed*i);
}
}
functiondisabledButtons(){
for(vari=0;i<5;i++){
buttonsItem[i].setAttribute('disabled','disabled');
}
prev.setAttribute('disabled','disabled');
next.setAttribute('disabled','disabled');
container.setAttribute('disabled','disabled');
}
functionresumeButtons(){
for(vari=0;i<5;i++){
buttonsItem[i].removeAttribute('disabled');
}
prev.removeAttribute('disabled');
next.removeAttribute('disabled');
container.removeAttribute('disabled');
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。