js实现移动端轮播图效果

2024-12-12 11:52:09

本文实例为大家分享了移动端轮播图效果展示的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="reset.css" rel="external nofollow" >
 <style>
 html,body{
 width:100%;
 overflow-x:hidden;
 }
 html{
 font-size:100px;
 }
 .banner{
 position:relative;
 height:3rem;
 overflow:hidden;
 }
 .banner .wrapper{
 position:absolute;
 top:0;
 left:-100%;
 height:100%;
 }
 .banner .wrapper .slide{
 float:left;
 height:100%;
 background:#eee;
 }
 .banner .wrapper .slide img{
 display:none;
 width:100%;
 height:100%;
 }
 .tip{
 position:absolute;
 left:0;
 bottom:.1rem;
 width:100%;
 height:.16rem;
 text-align:center;
 }
 .tip li{
 display:inline-block;
 margin:0 .03rem;
 width:.16rem;
 height:.16rem;
 background:rgba(0,0,0,0.2);
 border-radius:50%;
 vertical-align:top;
 }
 .tip li.bg{
 background:#007aff;
 }
 </style>
</head>
<body>
 <section class='banner'>
 <div class='wrapper'>
 <!--实现无缝滚动:把第一张放末尾 最后一张放开头-->
 <div class='slide'><img data-src="img/banner5.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner1.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner2.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner3.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner4.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner5.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner1.jpg" alt=""></div>
 </div>
 <ul class='tip'>
 <li class='bg'></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </section>

 <script charset='utf-8' src='zepto.min.js'></script>
 <script charset='utf-8'>
 //REM
 ~function(){
 document.documentElement.style.fontSize = document.documentElement.clientWidth/640*100 + 'px';
 }()
 //页面中如果自己使用了TOUCH MOVE等原生事件，需要把浏览器的默认行为阻止掉
 $(document).on('touchmove touchstart touchend',function(ev){
 ev.preventDefault();
 })
 //BANNER
 var bannerRender = (function(){
 var winW = document.documentElement.clientWidth,
 maxL = 0,
 minL = 0;
 var $banner = $('.banner'),
 $wrapper = $banner.children('.wrapper'),
 $slideList = $wrapper.children('.slide'),
 $imgList = $wrapper.find('img');
 var step = 1,
 count = 0,
 followTimer = null;

 //public fn
 function isSwipe(strX,strY,endX,endY){
 return Math.abs(endX - strX)>30 || Math.abs(endY - strY) > 30)
 }
 function swipeDir(strX,strY,endX,endY){
 return Math.abs(endX - strX)>=Math.abs(endY - strY)?(endX - strX>0?'right':'left'):(endY - strY>0?'down':'up');
 }
 //touch start
 function dragStart(ev){
 var point = ev.touches[0];
 $wrapper.attr({
  strL:parseFloat($wrapper.css('left')),
  strX:point.clientX,
  strY:point.clientY,
  isMove:false,
  dir:null,
  changeX:null
 })
 }
 //touch move
 function dragIng(ev){
 var point = ev.touches[0];
 var endX = point.clientX,
  endY = point.clientY,
  strX = parseFloat($wrapper.attr('strX')),
  strY = parseFloat($wrapper.attr('strY')),
  strL = parseFloat($wrapper.attr('strL')),
  changeX = endX - strX;
 //计算出是否滑动以及滑动的方向：只有是左右滑动才进行处理
 var isMove = isSwipe(strX,strY,endX,endY),
  dir = swipeDir(strX,strY,endX,endY);
 if(isMove && /(left|right)/i.test(dir)){
  $wrapper.attr({
  isMove:true,
  dir:dir,
  changeX:changeX
  });
  var curL = strL+changeX;
  curL = curL>maxL?maxL:(curL<minL?minL:curL);
  $wrapper[0].style.webkitTransitionDuration = '0s';
  $wrapper.css('left',curL);
 }

 }
 //touch end
 function dragEnd(){
 var isMove = $wrapper.attr('isMove'),
  dir = $wrapper.attr('dir'),
  changeX = parseFloat($wrapper.attr('changeX'));
 if(isMove && /(left|right)/i.test(dir)){
  if(Math.abs(changeX)>=winW/2){
  if(dir==='left'){
  step++;
  }else{
  step--;
  }
  }
 }

 $wrapper[0].style.webkitTransitionDuration = '.2s';
 $wrapper.css('left',-step*winW);
 lazyImg();
 //动画运动过程中，我们监听一个定时器:动画运动完成判断当前是否运动到边界，如果运动到达了边界，我们让其立马回到自己的真实位置
 window.clearTimeout(followTimer)
 followTimer = window.setTimeout(function(){
  if(step===0){
  $wrapper[0].style.webkitTransitionDuration = '0s';
  $wrapper.css('left',-(count-2)*winW);
  step = count-2;
  lazyImg();
  }
  if(step===count-1){
  $wrapper[0].style.webkitTransitionDuration = '0s';
  $wrapper.css('left',-winW);
  step = 1;
  lazyImg();
  }
  window.clearTimeout(followTimer)
 },200)

 }
 //图片延迟加载，让当前的活动块及相邻的两个活动块进行加载
 function lazyImg(){
 var $cur = $slideList.eq(step),
  $tar = $cur.add($cur.prev()).add($cur.next());
 $tar.each(function(index,item){
  var $img = $(item).children('img');
  if($img.attr('isLoad')==='true'){
  //ATTR存储或者获取的属性值都是一个字符串，如果当前的图片已经加载过了，我们就不需要重新的加载了
  return;
  }
  var oImg = new Image;
  oImg.src = $img.attr('data-src');
  oImg.onload = function(){
  $img.attr({
  src:this.src,
  isLoad:true
  }).css('display','block')
  oImg = null;
  }
 })

 }

 return{
 init:function(){
  //init css style
  count = $slideList.length;
  minL = -($slideList.length-1)*winW;
  $wrapper.css('width',$slideList.length*winW);
  $slideList.css('width',winW);
  //lazy img
  lazyImg();
  $banner.on('touchstart',dragStart).on('touchmove',dragIng).on('touchend',dragEnd)
 }
 }
 })()

 bannerRender.init();
 </script>
</body>
</html>

边界判断逻辑可参照下图

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

支持移动端原生js轮播图

直接上代码,自行复制粘贴,本人是新手,欢迎指正. <!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-sca
原生JS实现移动端web轮播图详解（结合Tween算法造轮子）

前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改. 所以我们要尝试去自己造一些轮子, 以适应各种复杂多变的需求; 另外一点, 自己写的代码如果有bug是很容易修复的, 对自身的提高也很大. 在没有阅读swiper源码的过程下,我尝试自己实现一个简易而不失实用的移动端轮播图, 经过几个小时的思考和实践终于还是实现了(如图): 实现移动端的轮播图要
原生js实现移动开发轮播图、相册滑动特效

使用方法: 分别引用css文件和js文件如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script
flexslider.js实现移动端轮播

效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>flexslider.js移动端轮播</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="
Javascript实现视频轮播在pc端与移动端均可

最近客户要求用Javascript实现视频轮播: 有兴趣的同学可以参开一下下面写了一个程序实现视频轮播,pc端与移动端均可以实现, 但移动端,存在有一点bug; 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <met
利用纯js + transition动画实现移动端web轮播图详解

前言在上一篇文章中,我们使用 tween算法实现了 ease-out移动效果, 其实更简洁的方法是使用 css3的 transition动画,下面话不多说了,来一起看看详细的介绍吧. 核心点: 在我们通过代码来移动一段距离的时候, 使用 transion动画;在手指移动的时候,不使用transition动画. 使用 transition实现的动画效果的轮播图js代码不足100行 ~function () { var lastPX = 0; // 上一次触摸的位置x坐标, 需要计算出手指每次移
JS仿京东移动端手指拨动切换轮播图效果

如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果. 这个效果的主要技术点依托于触屏设备特有的touch事件:好了,接下来就进入主题吧. 首先是html布局: 1. 这里强调的是记得给html加上viewport这个适口属性. 2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张
JavaScript实现移动端轮播效果

这个轮播代码不是我自己所写,是偶然游览一个简友的主页看到的,今天刚看了事件,决定来逐行分析一下这个代码.首先,移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为,所以我们要用到js中的与触摸操作有关的新事件.其实我们轮播的原理和以前相同,都是通过改变元素的位置来控制图片的出现,但让我们不是很上手的,是那些用于跟踪触摸的属性. 下面,我简单介绍一下与触摸相关的知识触摸事件 touchstart:当手指触摸屏幕时触发,一只手指放在屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续触
原生JS实现pc端轮播图效果

本文实例为大家分享了JS实现pc端轮播图效果的具体代码,供大家参考,具体内容如下案例:轮播图需求布局:ul下有很多li标签:浮动在一行: 原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden: 功能需求: 序号轮播左右按钮的轮播自动轮播鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播实现效果: html部分 <div class="box" id="box"> <div class=
js实现移动端轮播图效果

本文实例为大家分享了移动端轮播图效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max
基于javascript实现移动端轮播图效果

本文实例为大家分享了js实现移动端轮播图效果的具体代码,供大家参考,具体内容如下插件使用: 1.zepto.js 2.touch.js 实现效果 html部分:   <div class="box"> <ul>  <li>
js实现移动端轮播图

本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下这是结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0&
js实现移动端轮播图滑动切换

本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码,供大家参考,具体内容如下移动端手势轮播图分析 1.自动轮播且无缝 [定时器.过渡动画] 2.分页器要随着图片的轮播而改变 [根据索引切换] 3.滑动效果 [touch事件] 4.图片随着分页器变化 5.滑动结束的时候,如果滑动的距离不超过屏幕的1/3,就恢复回去 [过渡] 6.滑动结束的时候,如果滑动的距离超过屏幕的1/3,就切换 [滑动方向 + 过渡]] html页面结构  <div class=&qu
使用html+js+css 实现页面轮播图效果(实例讲解)

html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=
js实现简单的轮播图效果

本文实例为大家分享了js实现简单的轮播图效果的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"
js+css实现卡片轮播图效果

本文实例为大家分享了js+css实现卡片轮播图效果的具体代码,供大家参考,具体内容如下实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样下面是代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
原生JS实现简单的轮播图效果

本文实例为大家分享了JS实现简单的轮播图效果的具体代码,供大家参考,具体内容如下实现效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 2.点击右侧按钮一次,图片往左播放一张,左侧按钮同理. 3.图片播放的同时,下面的小圆圈模块也跟随一起变化. 5.鼠标不经过轮播图,轮播图会自动向右播放图片,经过轮播图之后停止自动播放图片. 轮播图向右移动的时候要用到缓动画的函数,具体见博客:JS实现添加缓动画的方法 (1)布局:轮播图部分的图片用ul进行布局,里面的每个li放a标签,
原生js实现无限循环轮播图效果

知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px

js实现移动端轮播图效果

相关推荐

随机推荐