支持移动端原生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 - 如何引入js代码
Mar 09 Javascript
json简单介绍
Jun 10 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
vue组件中实现嵌套子组件案例
Aug 31 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
用Flash图形化数据(一)
2006/10/09 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
JS实现图片切换效果
2018/11/17 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
python使用itchat实现手机控制电脑
2018/02/22 Python
python版本单链表实现代码
2018/09/28 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
翻译专业应届生求职信
2013/11/23 职场文书
房地产销售员的自我评价分享
2013/12/04 职场文书
个人求职信范文分享
2013/12/13 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
文明班级建设方案
2014/05/15 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
家长通知书家长意见
2015/06/03 职场文书
中秋晚会致辞
2015/07/31 职场文书
暑假打工感想
2015/08/07 职场文书
Django实现drf搜索过滤和排序过滤
2021/06/21 Python