1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <style>
  9.         #swiper{
  10.             height: 200px;
  11.             width: 200px;
  12.             border:  1px solid #cccccc;
  13.             margin: 0 auto;
  14.             overflow: hidden;
  15.             position: relative;
  16.         }
  17.         #swiper div{
  18.             height: 200px;
  19.             width: 200px;
  20.             float: left;
  21.             text-align: center;
  22.  
  23.         }
  24.         #swiper div:nth-child(1){
  25.             background: pink;
  26.         }
  27.         #swiper div:nth-child(2){
  28.             height: 200px;
  29.             width: 200px;
  30.             float: left;
  31.             text-align: center;
  32.             background: gray;
  33.         }
  34.         #swiper div:nth-child(3){
  35.             height: 200px;
  36.             width: 200px;
  37.             float: left;
  38.             text-align: center;
  39.             background: yellow;
  40.         }
  41.         #swiper div:nth-child(4){
  42.             height: 200px;
  43.             width: 200px;
  44.             float: left;
  45.             text-align: center;
  46.             background: pink;
  47.         }
  48.         #swiper div:nth-child(5){
  49.             height: 200px;
  50.             width: 200px;
  51.             float: left;
  52.             text-align: center;
  53.             background: gray;
  54.         }
  55.         #left{
  56.                 position: absolute;
  57.             left: 0;
  58.             top: 50%;
  59.             transform: translate3d(0,-50%,0);
  60.             z-index: 999;
  61.         }
  62.         #right{
  63.            position: absolute;
  64.             right: 0;
  65.             top: 50%;
  66.             transform: translate3d(0,-50%,0);
  67.             z-index: 999;
  68.         }
  69.         #swiperson{
  70.             position: relative;
  71.         }
  72.     </style>
  73.     <title>Document</title>
  74. </head>
  75. <body>
  76. <div id="swiper">
  77.     <button id="left">左</button>
  78.     <button id="right">右</button>
  79.     <div id="swiperson">
  80.         <div>3</div>
  81.         <div>1</div>
  82.         <div>2</div>
  83.         <div>3</div>
  84.         <div>1</div>
  85.     </div>
  86. </div>
  87. <script>
  88.     // 轮播图插件
  89.  
  90.     // 样式布局
  91.     let allWidth = document.getElementById('swiperson').children.length * document.getElementById('swiper').clientWidth;
  92.     let oneWidth = document.getElementById('swiper').clientWidth;
  93.     document.getElementById('swiperson').style.width = allWidth + 'px';
  94.     document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth +'px)';
  95.     // 点击逻辑
  96.     let index = 1;
  97.     let length = document.getElementById('swiperson').children.length;
  98.     let flg = true;
  99.  
  100.     document.getElementById("swiperson").addEventListener("transitionend", function () {
  101.         flg = true;
  102.         if(index === length-1){
  103.             document.getElementById('swiperson').style.transition = 'none';
  104.             document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth +'px)';
  105.             index = 1
  106.         }
  107.         if(index === 0){
  108.             document.getElementById('swiperson').style.transition = 'none';
  109.             document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth * (length-2)+'px)';
  110.             index = length - 2
  111.         }
  112.     });
  113.  
  114.     function right() {
  115.         if(flg === true){
  116.             flg = false;
  117.             index++;
  118.             document.getElementById('swiperson').style.transition = 'all 1s';
  119.             document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth*index +'px)'
  120.         }
  121.     }
  122.  
  123.     function left() {
  124.         if(flg === true){
  125.             flg = false;
  126.             index--;
  127.             document.getElementById('swiperson').style.transition = 'all 1s';
  128.             document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth*index +'px)'
  129.         }
  130.     }
  131.  
  132. // 点击
  133.     document.getElementById('left').onclick = function () {
  134.          left()
  135.     };
  136.     document.getElementById('right').onclick = function () {
  137.         right();
  138.     };
  139.  
  140.     // 自动轮播
  141.     var time =  setInterval(function () {
  142.         right();
  143.     },2000)
  144.  
  145.     //手动滑动逻辑
  146.     var a;
  147.      document.getElementById('swiper').ontouchstart = function (ev) {
  148.          clearInterval(time)
  149.           a = ev.changedTouches[0].pageX;
  150.      };
  151.  
  152.     document.getElementById('swiper').ontouchmove = function (ev) {
  153.         let b = ev.changedTouches[0].pageX;
  154.         console.log(b)
  155.         if(b - a > 40){
  156.             console.log('右滑动')
  157.             left()
  158.         }
  159.         if(a - b > 40){
  160.             console.log('左滑动')
  161.             right();
  162.  
  163.         }
  164.     }
  165.  
  166.     //PC 端  滑动逻辑
  167.     var a;
  168.     document.getElementById('swiper').onmousedown = function (ev) {
  169.         clearInterval(time)
  170.         console.log(ev)
  171.         a = ev.pageX;
  172.  
  173.         document.getElementById('swiper').onmousemove = function (ev) {
  174.             console.log('move');
  175.             let b = ev.pageX;
  176.             if(b - a > 0){
  177.                 console.log('右滑动')
  178.                 left()
  179.             }
  180.             if(a - b > 0){
  181.                 console.log('左滑动')
  182.                 right();
  183.             }
  184.         };
  185.     }
  186.  
  187.     document.getElementById('swiper').onmouseup = function (ev) {
  188.         document.getElementById('swiper').onmousemove = null
  189.     }
  190.  
  191. </script>
  192. </body>
  193. </html>

　　

js 原生轮播图插件的更多相关文章

  1. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  2. js原生轮播图

    轮播图是新手学前端的必经之路! 直接上代码! <!DOCTYPE html><html lang="en"><head> <meta ch ...

  3. featureCarousel.js 3d轮播图插件

    jQuery Feature Carousel 插件是国外的一比较优秀的旋转木马图片插件. 点击这里进入原文. 插件特点: 1.处理div的3d旋转木马效果. 2.支持一个中心,2个侧面的功能 3.中 ...

  4. 小白之js原生轮播图

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  6. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  7. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  8. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  9. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

随机推荐

  1. macos上命令行查看磁盘序列号

    收集到两种命令行获取方法:(另外https://www.maketecheasier.com/find-mac-serial-number/中还说明了GUI模式下的查看方法) 1.system_pro ...

  2. Charles 安装配置

    与Fiddler相比,Charles 对url的分类列表更为清晰,这一点是我更喜欢Charles的一点.当然在抓app包上,个人觉得使用Charles更得心应手,这一点可能仁者见仁智者见智. 下载 官 ...

  3. pandas在指定列插入数据

    import pandas as pd import numpy as np df = pd.DataFrame(np.arange(15).reshape(5, 3), columns=['a', ...

  4. 国产手机早就异军突起，为何还是有很多人“迷恋”iPhone？

    近几年,国产手机不论是从外观上还是设计上,以及销量上都比前有了长足的进步,手机的品质和售后也在不断提升.这也让中国手机厂商不断的推出了拥有自己品牌特色的产品.特别是2018年不少国产手机品牌的旗舰级产 ...

  5. python3 subprocess 内存操作视频转换流格式

    import subprocessout = open('./tmp/sss.mp4','rb').read()p = subprocess.Popen(["./ffmpeg",& ...

  6. Python 处理图片 -- pillow库

    pip install pillow 基本使用 from PIL import Image # new 创建一张图片 im1 = Image.new('RGB', (500, 300), (50, 1 ...

  7. 什么是MTF曲线

    MTF(Modulation Transfer Function)是衡量镜头性能的一个重要指标.将镜头把被摄体所具有的对比度再现到像面上的忠诚度以空间频率特性进行表示,便绘成了MTF曲线图. 曲线图的 ...

  8. ZJNU 1153 - 找单词——中级

    状态转移b[i]记录价值为i的单词种类数d[j+k*i]+=b[j] , k<=a[i]&&j+k*i<=50表示价值为j+k*i的单词可以由价值为j的单词加上k个i字母转 ...

  9. [数学][欧拉降幂定理]Exponial

    Exponial 题目 http://exam.upc.edu.cn/problem.php?cid=1512&pid=4 欧拉降幂定理:当b>phi(p)时,有a^b%p = a^(b ...

  10. 场景实践篇一：Nginx负载均衡配置

    code1   code2    code3  三个文件夹, 每个文件夹下面一个 index.html 的文件夹 cd /etc/nginx/conf.d/  下面新建   server1.conf  ...