<!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">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <style>

        #swiper{

            height: 200px;

            width: 200px;

            border:  1px solid #cccccc;

            margin: 0 auto;

            overflow: hidden;

            position: relative;

        }

        #swiper div{

            height: 200px;

            width: 200px;

            float: left;

            text-align: center;

        }

        #swiper div:nth-child(1){

            background: pink;

        }

        #swiper div:nth-child(2){

            height: 200px;

            width: 200px;

            float: left;

            text-align: center;

            background: gray;

        }

        #swiper div:nth-child(3){

            height: 200px;

            width: 200px;

            float: left;

            text-align: center;

            background: yellow;

        }

        #swiper div:nth-child(4){

            height: 200px;

            width: 200px;

            float: left;

            text-align: center;

            background: pink;

        }

        #swiper div:nth-child(5){

            height: 200px;

            width: 200px;

            float: left;

            text-align: center;

            background: gray;

        }

        #left{

                position: absolute;

            left: 0;

            top: 50%;

            transform: translate3d(0,-50%,0);

            z-index: 999;

        }

        #right{

           position: absolute;

            right: 0;

            top: 50%;

            transform: translate3d(0,-50%,0);

            z-index: 999;

        }

        #swiperson{

            position: relative;

        }

    </style>

    <title>Document</title>

</head>

<body>

<div id="swiper">

    <button id="left">左</button>

    <button id="right">右</button>

    <div id="swiperson">

        <div>3</div>

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>1</div>

    </div>

</div>

<script>

    // 轮播图插件

    // 样式布局

    let allWidth = document.getElementById('swiperson').children.length * document.getElementById('swiper').clientWidth;

    let oneWidth = document.getElementById('swiper').clientWidth;

    document.getElementById('swiperson').style.width = allWidth + 'px';

    document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth +'px)';

    // 点击逻辑

    let index = 1;

    let length = document.getElementById('swiperson').children.length;

    let flg = true;

    document.getElementById("swiperson").addEventListener("transitionend", function () {

        flg = true;

        if(index === length-1){

            document.getElementById('swiperson').style.transition = 'none';

            document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth +'px)';

            index = 1

        }

        if(index === 0){

            document.getElementById('swiperson').style.transition = 'none';

            document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth * (length-2)+'px)';

            index = length - 2

        }

    });

    function right() {

        if(flg === true){

            flg = false;

            index++;

            document.getElementById('swiperson').style.transition = 'all 1s';

            document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth*index +'px)'

        }

    }

    function left() {

        if(flg === true){

            flg = false;

            index--;

            document.getElementById('swiperson').style.transition = 'all 1s';

            document.getElementById('swiperson').style.transform = 'translateX(-'+ oneWidth*index +'px)'

        }

    }

// 点击

    document.getElementById('left').onclick = function () {

         left()

    };

    document.getElementById('right').onclick = function () {

        right();

    };

    // 自动轮播

    var time =  setInterval(function () {

        right();

    },2000)

    //手动滑动逻辑

    var a;

     document.getElementById('swiper').ontouchstart = function (ev) {

         clearInterval(time)

          a = ev.changedTouches[0].pageX;

     };

    document.getElementById('swiper').ontouchmove = function (ev) {

        let b = ev.changedTouches[0].pageX;

        console.log(b)

        if(b - a > 40){

            console.log('右滑动')

            left()

        }

        if(a - b > 40){

            console.log('左滑动')

            right();

        }

    }

    //PC 端  滑动逻辑

    var a;

    document.getElementById('swiper').onmousedown = function (ev) {

        clearInterval(time)

        console.log(ev)

        a = ev.pageX;

        document.getElementById('swiper').onmousemove = function (ev) {

            console.log('move');

            let b = ev.pageX;

            if(b - a > 0){

                console.log('右滑动')

                left()

            }

            if(a - b > 0){

                console.log('左滑动')

                right();

            }

        };

    }

    document.getElementById('swiper').onmouseup = function (ev) {

        document.getElementById('swiper').onmousemove = null

    }

</script>

</body>

</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. c#学习笔记06——XML

    XML概述:eXtensible Markup Language,可扩展标记语言.网络应用开发的一项新技术.同HTML一样是一种标记语言,但是数据描述能力要强很多.XML具有描述所有已知未知数据的能力 ...

  2. tensorflow从训练自定义CNN网络模型到Android端部署tflite

    网上有很多关于tensorflow lite在安卓端部署的教程,但是大多只讲如何把训练好的模型部署到安卓端,不讲如何训练,而实际上在部署的时候,需要知道训练模型时预处理的细节,这就导致了自己训练的模型 ...

  3. 使用tcpdump查看HTTP请求响应 详细信息 数据

    安装tcpdump: sudo yum install tcpdump 查看get请求: tcpdump -s 0 -A 'tcp dst port 80 and tcp[((tcp[12:1] &a ...

  4. rpm包管理工具

    介绍: RPM [1]  是Red-Hat Package Manager(RPM软件包管理器)的缩写,这一文件格式名称虽然打上了RedHat的标志,但是其原始设计理念是开放式的,现在包括OpenLi ...

  5. Fabric不支持对同一个数据的并发事务处理

    Fabric不支持对同一个数据的并发事务处理,也就是说, 如果我们同时运行了invoke(一),invoke(二),那么只会第一条Transaction成功, 而第二条失败.因为在Committer节 ...

  6. RDD(五)——action

    reduce(func) 通过func函数聚集RDD中的所有元素并得到最终的结果,先聚合分区内数据,再聚合分区间数据.Func函数决定了聚合的方式. def main(args: Array[Stri ...

  7. 前端框架Bootstrap（10.7国庆补写）

    框架的官网地址:https://v3.bootcss.com/ 主要学习Bootstrap框架提供的样式.组件.插件的使用. 首先下载到本地,在项目中导入使用: 下载的文件中包含:min.css的是压 ...

  8. Django路由层与视图层

    表与表之间建关系 图书管理系统为例 书籍表 出版社表 作者表 三个表之间的关系: 考虑表之间的关系:换位思考 1.书籍和出版社是一对多,外键字段建立在书籍表中 2.书籍和作者是多对多, 需要建立第三方 ...

  9. Durandal入门

    参考:http://www.360doc.com/content/14/1223/11/13819_435123743.shtml 示例代码下载地址:http://durandaljs.com/ver ...

  10. POJ-2528 Mayor's posters（线段树区间更新+离散化）

    http://poj.org/problem?id=2528 https://www.luogu.org/problem/UVA10587 Description The citizens of By ...