支持移动端原生js轮播图


Posted in Javascript onFebruary 16, 2017

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

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
Javascript动画效果(4)
Oct 11 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
jQuery为DOM动态追加事件的方法
Feb 16 #Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 #Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 #Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 #Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 #Javascript
bootstrap中添加额外的图标实例代码
Feb 15 #Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 #Javascript
You might like
用Flash图形化数据(一)
2006/10/09 PHP
php过滤危险html代码
2008/08/18 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
python实时监控logstash日志代码
2020/04/27 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
为什么需要版本控制
2016/10/28 面试题
市场营销专业推荐信
2013/11/03 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
python playwright之元素定位示例详解
2022/07/23 Python
DQL数据查询语句使用示例
2022/12/24 MySQL