<!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. gff文件提取cds

    #!/usr/bin/perl use strict; use warnings; ########input######## ];my $cut = &cut($gff);my %cut = ...

  2. Linux-进程状态和system函数

    1.进程的5种状态 (1).就绪态. 这个进程当前所有运行条件就绪,只要得到CPU时间就能直接运行. (2).运行态 就绪态时得到了CPU就进入运行态开始运行. (3).僵尸态 进程已经结束但是父进程 ...

  3. JS中的let变量

    介绍JS中的let变量: let允许你声明一个作用域被限制在块级中的变量.语句或者表达式.在Function中局部变量推荐使用let变量,避免变量名冲突. 作用域规则 let 声明的变量只在其声明的块 ...

  4. JS 判断移动端与PC端

    js判断移动端与pc端   这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...

  5. idea高效插件

    RestfulToolkit:url定位controller,快捷键:ctrl+\Maven Helper:依赖分析JRebel:热部署Rainbow Brackets:个性化花括号aiXcode:a ...

  6. Spring 连接MySQL报错java.sql.SQLException: Unknown system variable 'tx_isolation'

    先是报错255,这个时候需要把 jdbc:mysql://localhost:3306/projUse 写成 jdbc:mysql://localhost:3306/projUse?useUnicod ...

  7. AddressUtils

    package com.ruoyi.common.utils; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import com. ...

  8. 吴裕雄--天生自然 JAVA开发学习：接口

    [可见度] interface 接口名称 [extends 其他的接口名] { // 声明变量 // 抽象方法 } import java.lang.*; //引入包 public interface ...

  9. Codeforces1303F Number of Components

    Description link 题意:给一个全\(0\)矩阵,每次支持一个修改,修改不还原(这要是还原了不就成\(A\)题了) 然后询问每一次修改完了当前矩阵的连通块个数 每一个修改的值单调不降 修 ...

  10. windows10+apache2.4+python3.6部署Django2.2.4项目

    刚从家回来,老师让写专利,就开始准备写,初稿交给老师后,把我说了一顿,我就想着回去改呀,然后...老师找到了我,说是食品院那急需一个展示数据的平台,然我尽快干出来,我也是菜鸟啊,就没单独干过呀,即使是 ...