支持移动端原生js轮播图_网络技术_宿州市腾雀网络科技有限公司

支持移动端原生js轮播图

发布时间 - 2026-01-10 23:05:08 点击率：次

直接上代码，自行复制粘贴，本人是新手，欢迎指正。

<!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">&lt;</a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">&gt;</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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js # 轮播图 # js实现移动端轮播图滑动切换 # javascript实现移动端轮播图 # 原生js实现移动端Touch轮播图的方法步骤 # js实现移动端轮播图 # JS实现点击拉拽轮播图pc端移动端适配 # js原生实现移动端手指滑动轮播图效果的示例 # 利用纯js + transition动画实现移动端web轮播图详解 # js实现移动端轮播图效果 # JS仿京东移动端手指拨动切换轮播图效果 # 基于javascript实现移动端轮播图效果 # 人是 # 大家多多 # float # buttons # left # img # bottom # auto # hidden # margin # position # absolute # relative # list # index # cursor # pointer # opacity # rgb # arrow

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：怎样通过Amazon Route 53实现高效DNS管理和负

下一篇：使用七牛云存储建站时，怎样确保数据安全与隐私保护？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：怎样通过Amazon Route 53实现高效DNS管理和负

下一篇：使用七牛云存储建站时，怎样确保数据安全与隐私保护？