<!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. Mysql 环境部署

    1.Window 1.1 下载软件: https://dev.mysql.com/downloads/mysql/ 依次点击上图 红色框中按钮 1.2 安装软件 1.2.1 解压软件 正常解压即可  ...

  2. oracle 学习（五）pl/sql语言存储过程&包

    首先搞清楚俩概念 存储过程(procedure)&程序包(package) 存储过程:数据库对象之一,可以理解为数据库的子程序,在客户端和服务器端可以直接调用它.触发器是与表直接关联的特殊存储 ...

  3. 第二季第八天 part2

    for (let i = 0; i < 3; i++) { log(i) } log(i) // 结果是 undefined let和const的作用域只在花括号内 let和const不能重复声 ...

  4. Velocity脚本入门教程

    下面资料整理自网络 一.Velocity介绍 Velocity是Apache公司的开源产品,是一套基于Java语言的模板引擎,可以很灵活的将后台数据对象与模板文件结合在一起,说的直白一点,就是允许任何 ...

  5. 吴裕雄--天生自然TensorFlow高层封装：使用TFLearn处理MNIST数据集实现LeNet-5模型

    # 1. 通过TFLearn的API定义卷机神经网络. import tflearn import tflearn.datasets.mnist as mnist from tflearn.layer ...

  6. day56-mysql-其他查询-面试题-重点

    一.重点 面试题 1. 临时表查询: -- 查询高于本部门平均工资的人员 #1.先查询部门人员的平均工资 SELECT dept_id,AVG(salary)as sal from person GR ...

  7. AI大火之下智能手机行业能适应这一风口吗？

    今年智能手机行业的变化,实在是让人摸不到头脑.一方面是智能手机厂商依然在拿出各种具有噱头的产品,仿佛整个市场还依然热火朝天.但在另一方面,智能手机出货量却出现大幅下滑.据中国信息通信研究院发布的数据显 ...

  8. 【转】nginx如何设置防盗链

    转自博客园作者:howhy,文章地址:nginx如何设置防盗链.大佬写的甚好,在此备份一下 关于nginx防盗链的方法网上有很多教程,都可以用,但是我发现很多教程并不完整,所做的防盗链并不是真正的彻底 ...

  9. 吴裕雄--天生自然python学习笔记：python 用pygame模块处理音频文件

    除了对图片. Word 等普通格式的文件进行处理外, Python 还有强大的多媒体文件操作能力,如对音频.视频 文件的操作 . 如果要播放音乐,我们可以用 pygame 包中的 mixer 对 象. ...

  10. 算法之匹配：KMP

    public static int getIndexOf(String str1, String str2) { if (str1 == null || str2 == null || str1.le ...