支持移动端原生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控制框架刷新
Aug 01 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
js命名空间写法示例
Dec 18 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
js数组去重的hash方法
Dec 22 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 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
PHP 5.3.0 安装分析心得
2009/08/07 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
css图片自适应大小
2007/11/28 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
Python实现登录接口的示例代码
2017/07/21 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
什么是会话Bean
2015/05/14 面试题
会计演讲稿范文
2014/05/23 职场文书
临时用工协议书范本
2014/10/29 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
承诺保证书格式
2015/02/28 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js