支持移动端原生js轮播图
程序员文章站
2023-11-22 16:15:16
直接上代码，自行复制粘贴，本人是新手，欢迎指正。
直接上代码，自行复制粘贴，本人是新手，欢迎指正。
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>轮播图</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<style type="text/css">
.container{
width: 500px;
height: 400px;
overflow: hidden;
margin: 50px auto;
position: relative;
}
.list{
width: 2500px;
height: 400px;
position: absolute;
left: 0px;
}
.list img{
float: left;
height: 400px;
width: 500px;
}
.buttons{
position: absolute;
width: 75px;
height: 20px;
bottom: 10px;
left: 50%;
margin-left: -38px;
z-index: 2;
}
.buttons span{
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>
<div id="container" class="container">
<div id="list" class="list">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
</div>
<div id="buttons" class="buttons">
<span index="0" class="on"></span><!--
--><span index="1"></span><!--
--><span index="2"></span><!--
--><span index="3"></span><!--
--><span index="4"></span>
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a>
</div>
<script type="text/javascript">
window.onload = function(){
var container = document.getelementbyid('container');
var list = document.getelementbyid('list');
var buttons = document.getelementbyid('buttons');
var buttonsitem = buttons.getelementsbytagname('span');
var prev = document.getelementbyid('prev');
var next = document.getelementbyid('next');
var index = 0;
var startx = 0;
var endx = 0;
container.addeventlistener('touchend',function(event){
if(event.changedtouches.length==1&&this.getattribute('disabled')!='disabled'){
var touch = event.changedtouches[0];
endx = touch.pagex;
var offset = 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'){
var touch = event.targettouches[0];
startx = touch.pagex;
}
})
prev.addeventlistener('click',function(){
if (this.getattribute('disabled')=='disabled') {
return false;
}
prevmethod();
});
next.addeventlistener('click',function(){
if (this.getattribute('disabled')=='disabled') {
return false;
}
nextmethod();
});
for(var i=0;i<buttonsitem.length;i++){
buttonsitem[i].onclick = function(){
if (this.getattribute('disabled')=='disabled') {
return false;
}
var i = this.getattribute('index');
var length = math.abs((i-index)*500);
var direction = 'right';
if (length<0) {
direction = 'left';
}
index = i;
document.getelementsbyclassname('on')[0].setattribute('class','');
buttonsitem[index].classname = 'on';
animate(direction,1,length);
}
}
function prevmethod(){
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';
}
function nextmethod(){
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';
}
function animate(direction,speed,length){
var end = length/speed;
var count = 0;
for(var i=0;i<end;i++){
settimeout(function(){
count++;
var left = list.offsetleft;
if (direction=='right') {
left -= speed;
}else{
left += speed;
}
list.style.left = left+'px';
if(count<end-1){
disabledbuttons();
}else{
resumebuttons();
}
},speed*i);
}
}
function disabledbuttons(){
for(var i=0;i<5;i++){
buttonsitem[i].setattribute('disabled','disabled');
}
prev.setattribute('disabled','disabled');
next.setattribute('disabled','disabled');
container.setattribute('disabled','disabled');
}
function resumebuttons(){
for(var i=0;i<5;i++){
buttonsitem[i].removeattribute('disabled');
}
prev.removeattribute('disabled');
next.removeattribute('disabled');
container.removeattribute('disabled');
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。