pc端轮播图点击和鼠标拖动

作者: 匆匆那年_海 | 来源:发表于2021-07-29 16:48 被阅读0次

pc端轮播图点击和鼠标拖动
轮播组件——基于原生 && Vue
21/10/11 - 21/10/15 零碎知识记录
原生js-横向字幕无缝滚动
Axure原型设计——轮播图
拖动工具泡
CSS3 swiper框架
关于VueAwesomeSwiper在VUE中的使用以及遇到的一
vue-awesome-swiper（轮播图vue插件）
如何用原生JS实现简单轮播图（仿京东商城效果）

闲来无聊随手写个轮播图，嗨，有点一般见笑了，誒，就是玩

简介：首先，本轮播图数据共有4条，可根据需求自行修改，重点在这： 因为要无缝滚动，所以在第一个数据前加一个最后一条数据，在最后一条数据后面加上第一条数据，例如数据时1 2 3 4，结果变成4 1 2 3 4 1，很好理解哈。

直接上代码

1.样式+布局

<div class="swiper">
    <div class="imgList">
        <div class="imgItem" style="background:green">4</div>
        <div class="imgItem" style="background:red">1</div>
        <div class="imgItem" style="background:orange">2</div>
        <div class="imgItem" style="background:yellow">3</div>
        <div class="imgItem" style="background:green">4</div>
        <div class="imgItem" style="background:red">1</div>
    </div>
    <div class="circleList">
        <div class="circleItem"></div>
        <div class="circleItem"></div>
        <div class="circleItem"></div>
        <div class="circleItem"></div>
    </div>
    <div class="btn pre">&lt;</div>
    <div class="btn next">&gt;</div>
</div>

<style>
    * {
        margin: 0;
    }

    .swiper {
        position: relative;
        width: 800px;
        height: 600px;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .imgList {
        position: absolute;
        display: flex;
        align-items: center;
        transform: translateX(-800px);
    }

    .imgList .imgItem {
        width: 800px;
        height: 600px;
        font-size: 100px;
        line-height: 600px;
        text-align: center;
    }

    .btn {
        width: 60px;
        height: 40px;
        line-height: 35px;
        text-align: center;
        font-size: 40px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: calc(50% - 20px);
    }

    .btn.pre {
        left: 0;
    }

    .btn.next {
        right: 0;
    }

    .circleList {
        width: 200px;
        height: 40px;
        position: absolute;
        left: 50%;
        bottom: 30px;
        display: flex;
        transform: translateX(-50%);
        justify-content: center;
        align-items: center;
    }

    .circleList .circleItem {
        width: 7px;
        height: 7px;
        border-radius: 4px;
        border: 1px solid #ccc;
        background: #666666;
        margin: 0 2px;
    }
</style>

2.声明数据

<script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
  // 数据长度
  var lentgh = 4;
  // 当前第几个数据
  var page = 1;
  // 是否可以拖拽
  var isDrag = false;
  // 开始的x轴相对点
  var start = 0;
  // 开始的时间
  var startTime = 0;
  // 轮播图宽度
  var swiper_width = 800;
</script>

3.上一个

$(".pre").on("click", function(e) {
    page--
    console.log(page);
    $(".imgList").css({
        "transform": `translateX(${-swiper_width*page}px)`,
        "transition": "all 0.8s linear"
    })
    $(".circleList .circleItem").css({
        "background": "#666666"
    })
    $($(".circleList .circleItem")[page - 1]).css({
        "background": "#fff"
    })
    if (page < 1) {
        page = lentgh;
        $(".circleList .circleItem").css({
            "background": "#666666"
        })
        $($(".circleList .circleItem")[page - 1]).css({
            "background": "#fff"
        })
        setTimeout(() => {
            $(".imgList").css({
                "transform": `translateX(${-swiper_width*page}px)`,
                "transition": "all 0s linear"
            })
        }, 800)
    }
})

4.下一个

$(".next").on("click", function(e) {
    page++
    console.log(page);
    $(".imgList").css({
        "transform": `translateX(${-swiper_width*page}px)`,
        "transition": "all 0.8s linear"
    })
    $(".circleList .circleItem").css({
        "background": "#666666"
    })
    $($(".circleList .circleItem")[page - 1]).css({
        "background": "#fff"
    })
    if (page > lentgh) {
        page = 1;
        $(".circleList .circleItem").css({
            "background": "#666666"
        })
        $($(".circleList .circleItem")[page - 1]).css({
            "background": "#fff"
        })
        setTimeout(() => {
            $(".imgList").css({
                "transform": `translateX(${-swiper_width*page}px)`,
                "transition": "all 0s linear"
            })
        }, 800)
    }
})

5.设置计时器自动播放，移入暂停，移出开启播放

//设置一个定时器
var intervalId = setInterval(function() {
    $(".next").click();
}, 3000)
// 移入
$(".swiper").mouseover(function(e) {
    clearInterval(intervalId);
})
// 移出
$(".swiper").mouseleave(function() {
    console.log('mouseleave');
    intervalId = setInterval(function() {
        $(".next").click();
    }, 3000)
})

6.点击圆圈切换

$(".circleItem").on("click", function(e) {
    var index = $(this).index();
    page = index + 1;
    $(".imgList").css({
        "transform": `translateX(${-swiper_width*page}px)`,
        "transition": "all 0.8s linear"
    })
    $(".circleList .circleItem").css({
        "background": "#666666"
    })
    $($(".circleList .circleItem")[index]).css({
        "background": "#fff"
    })
})

7.鼠标快速拖拽和慢速拖拽，慢速拖拽超过一半才会切换，时间小于160毫秒符合快速拖拽

$(".imgList").on('mousedown', (e) => {
    startTime = Date.now();
    console.log('mousedown');
    var event = e || window.e;
    start = event.screenX;
    isDrag = true;
})
$(".imgList").on('mousemove', (e) => {
    if (isDrag) {
        var event = e || window.e;
        $(".imgList").css({
            "transform": `translateX(${-swiper_width*page+(event.screenX-start)}px)`
        })
    }
})
$(".imgList").on('mouseup', (e) => {
    // 快速拖拽
    var event = e || window.e;
    if (Date.now() - startTime < 160) {
        console.log('快速拖拽');
        if (event.screenX - start > 0) {
            $(".pre").click();
        } else {
            $(".next").click();
        }
    }
    // 慢速拖拽
    else {
        console.log('慢速拖拽');
        if (event.screenX - start < -swiper_width / 2) {
            $(".next").click();
        } else if (event.screenX - start > swiper_width / 2) {
            $(".pre").click();
        } else {
            $(".imgList").css({
                "transform": `translateX(${-swiper_width*page}px)`
            })
        }
    }
    isDrag = false;
    console.log('mouseup');
})

最后，完整代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>pc端轮播图点击和鼠标拖动</title>
        <style>
            * {
                margin: 0;
            }

            .swiper {
                position: relative;
                width: 800px;
                height: 600px;
                overflow: hidden;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            .imgList {
                position: absolute;
                display: flex;
                align-items: center;
                transform: translateX(-800px);
            }

            .imgList .imgItem {
                width: 800px;
                height: 600px;
                font-size: 100px;
                line-height: 600px;
                text-align: center;
            }

            .btn {
                width: 60px;
                height: 40px;
                line-height: 35px;
                text-align: center;
                font-size: 40px;
                color: #fff;
                background-color: rgba(0, 0, 0, 0.2);
                position: absolute;
                top: calc(50% - 20px);
            }

            .btn.pre {
                left: 0;
            }

            .btn.next {
                right: 0;
            }

            .circleList {
                width: 200px;
                height: 40px;
                position: absolute;
                left: 50%;
                bottom: 30px;
                display: flex;
                transform: translateX(-50%);
                justify-content: center;
                align-items: center;
            }

            .circleList .circleItem {
                width: 7px;
                height: 7px;
                border-radius: 4px;
                border: 1px solid #ccc;
                background: #666666;
                margin: 0 2px;
            }

            .circleList .circleItem:nth-child(1) {
                background: #fff;
            }
        </style>
    </head>

    <body>
        <div class="swiper">
            <div class="imgList">
                <div class="imgItem" style="background:green">4</div>
                <div class="imgItem" style="background:red">1</div>
                <div class="imgItem" style="background:orange">2</div>
                <div class="imgItem" style="background:yellow">3</div>
                <div class="imgItem" style="background:green">4</div>
                <div class="imgItem" style="background:red">1</div>
            </div>
            <div class="circleList">
                <div class="circleItem"></div>
                <div class="circleItem"></div>
                <div class="circleItem"></div>
                <div class="circleItem"></div>
            </div>
            <div class="btn pre">&lt;</div>
            <div class="btn next">&gt;</div>
        </div>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            // 数据长度
            var lentgh = 4;
            // 当前第几个数据
            var page = 1;
            // 是否可以拖拽
            var isDrag = false;
            // 开始的x轴相对点
            var start = 0;
            // 开始的时间
            var startTime = 0;
            // 轮播图宽度
            var swiper_width = 800;

            // 上一个
            $(".pre").on("click", function(e) {
                page--
                console.log(page);
                $(".imgList").css({
                    "transform": `translateX(${-swiper_width*page}px)`,
                    "transition": "all 0.8s linear"
                })
                $(".circleList .circleItem").css({
                    "background": "#666666"
                })
                $($(".circleList .circleItem")[page - 1]).css({
                    "background": "#fff"
                })
                if (page < 1) {
                    page = lentgh;
                    $(".circleList .circleItem").css({
                        "background": "#666666"
                    })
                    $($(".circleList .circleItem")[page - 1]).css({
                        "background": "#fff"
                    })
                    setTimeout(() => {
                        $(".imgList").css({
                            "transform": `translateX(${-swiper_width*page}px)`,
                            "transition": "all 0s linear"
                        })
                    }, 800)
                }
            })
            // 下一个
            $(".next").on("click", function(e) {
                page++
                console.log(page);
                $(".imgList").css({
                    "transform": `translateX(${-swiper_width*page}px)`,
                    "transition": "all 0.8s linear"
                })
                $(".circleList .circleItem").css({
                    "background": "#666666"
                })
                $($(".circleList .circleItem")[page - 1]).css({
                    "background": "#fff"
                })
                if (page > lentgh) {
                    page = 1;
                    $(".circleList .circleItem").css({
                        "background": "#666666"
                    })
                    $($(".circleList .circleItem")[page - 1]).css({
                        "background": "#fff"
                    })
                    setTimeout(() => {
                        $(".imgList").css({
                            "transform": `translateX(${-swiper_width*page}px)`,
                            "transition": "all 0s linear"
                        })
                    }, 800)
                }
            })
            //设置一个定时器
            var intervalId = setInterval(function() {
                $(".next").click();
            }, 3000)
            // 移入
            $(".swiper").mouseover(function(e) {
                clearInterval(intervalId);
            })
            // 移出
            $(".swiper").mouseleave(function() {
                console.log('mouseleave');
                intervalId = setInterval(function() {
                    $(".next").click();
                }, 3000)
            })
            // 点击圆圈
            $(".circleItem").on("click", function(e) {
                var index = $(this).index();
                page = index + 1;
                $(".imgList").css({
                    "transform": `translateX(${-swiper_width*page}px)`,
                    "transition": "all 0.8s linear"
                })
                $(".circleList .circleItem").css({
                    "background": "#666666"
                })
                $($(".circleList .circleItem")[index]).css({
                    "background": "#fff"
                })
            })
            // 手动拖拽===============================================================================
            $(".imgList").on('mousedown', (e) => {
                startTime = Date.now();
                console.log('mousedown');
                var event = e || window.e;
                start = event.screenX;
                isDrag = true;
            })
            $(".imgList").on('mousemove', (e) => {
                if (isDrag) {
                    var event = e || window.e;
                    $(".imgList").css({
                        "transform": `translateX(${-swiper_width*page+(event.screenX-start)}px)`
                    })
                }
            })
            $(".imgList").on('mouseup', (e) => {
                // 快速拖拽
                var event = e || window.e;
                if (Date.now() - startTime < 160) {
                    console.log('快速拖拽');
                    if (event.screenX - start > 0) {
                        $(".pre").click();
                    } else {
                        $(".next").click();
                    }
                }
                // 慢速拖拽
                else {
                    console.log('慢速拖拽');
                    if (event.screenX - start < -swiper_width / 2) {
                        $(".next").click();
                    } else if (event.screenX - start > swiper_width / 2) {
                        $(".pre").click();
                    } else {
                        $(".imgList").css({
                            "transform": `translateX(${-swiper_width*page}px)`
                        })
                    }
                }
                isDrag = false;
                console.log('mouseup');
            })
            // ===============================================================================
        </script>
    </body>

</html>

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。

pc端轮播图点击和鼠标拖动
闲来无聊随手写个轮播图，嗨，有点一般见笑了，誒，就是玩简介：首先，本轮播图数据共有4条，可根据需求自行修改，重点...
轮播组件——基于原生 && Vue
基于 better-scroll 的轮播图组件在做移动端轮播图的时候，本想沿用之前 PC 端的轮播图，后来发现并...
21/10/11 - 21/10/15 零碎知识记录
1.pc端实现移动端拖动效果思路 moveDown记录鼠标按下位置记录当前状态为按下拖动+moveUp记录当前状态...
原生js-横向字幕无缝滚动
功能：横向滚动，鼠标悬浮停止，离开继续滚动，支持pc端和移动端效果图: css: html: js:
Axure原型设计——轮播图
轮播图是网页设计或者APP设计常见的元素，学会使用axure原型工具制作轮播图对制作PC端或移动端的原型都非常实用...
拖动工具泡
概述一个拖动工具泡，拖动，点击触发事件，做了移动端与PC端兼容展示：涉及的点：1.事件绑定，删除事件，浏览器...
CSS3 swiper框架
主要用于pc端轮播图，移动端的轮播，滑停效果，h5界面效果网址：https://www.swiper.com.c...
关于VueAwesomeSwiper在VUE中的使用以及遇到的一
Vue-Awesome-Swiper 轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端...
vue-awesome-swiper（轮播图vue插件）
Vue-Awesome-Swiper 轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端...
如何用原生JS实现简单轮播图（仿京东商城效果）
不管是电商项目还是官网项目，不管是PC端还是移动端，我们最常见到的需求就是轮播图了。实现轮播图的原理与设计模式有很...