支持移动端原生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 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
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
yii中widget的用法
2014/12/03 PHP
JavaScript内核之基本概念
2011/10/21 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
浅析node.js中close事件
2014/11/26 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
几种响应式文字详解
2017/05/19 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
python绘制规则网络图形实例
2019/12/09 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
python中二分查找法的实现方法
2020/12/06 Python
自我介绍演讲稿
2014/01/15 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
诉前财产保全担保书
2014/05/20 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
表扬信格式模板
2015/05/05 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
代理词怎么写
2015/05/25 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android