pc端輪播圖點(diǎn)擊和鼠標(biāo)拖動(dòng)

閑來(lái)無(wú)聊隨手寫個(gè)輪播圖，嗨，有點(diǎn)一般見笑了，誒，就是玩

簡(jiǎn)介：首先，本輪播圖數(shù)據(jù)共有4條，可根據(jù)需求自行修改，重點(diǎn)在這： 因?yàn)橐獰o(wú)縫滾動(dòng)，所以在第一個(gè)數(shù)據(jù)前加一個(gè)最后一條數(shù)據(jù)，在最后一條數(shù)據(jù)后面加上第一條數(shù)據(jù)，例如數(shù)據(jù)時(shí)1 2 3 4，結(jié)果變成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.聲明數(shù)據(jù)
<script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
  // 數(shù)據(jù)長(zhǎng)度
  var lentgh = 4;
  // 當(dāng)前第幾個(gè)數(shù)據(jù)
  var page = 1;
  // 是否可以拖拽
  var isDrag = false;
  // 開始的x軸相對(duì)點(diǎn)
  var start = 0;
  // 開始的時(shí)間
  var startTime = 0;
  // 輪播圖寬度
  var swiper_width = 800;
</script>
3.上一個(gè)
$(".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.下一個(gè)
$(".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.設(shè)置計(jì)時(shí)器自動(dòng)播放，移入暫停，移出開啟播放
//設(shè)置一個(gè)定時(shí)器
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.點(diǎn)擊圓圈切換
$(".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.鼠標(biāo)快速拖拽和慢速拖拽，慢速拖拽超過(guò)一半才會(huì)切換，時(shí)間小于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端輪播圖點(diǎn)擊和鼠標(biāo)拖動(dòng)</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>
            // 數(shù)據(jù)長(zhǎng)度
            var lentgh = 4;
            // 當(dāng)前第幾個(gè)數(shù)據(jù)
            var page = 1;
            // 是否可以拖拽
            var isDrag = false;
            // 開始的x軸相對(duì)點(diǎn)
            var start = 0;
            // 開始的時(shí)間
            var startTime = 0;
            // 輪播圖寬度
            var swiper_width = 800;

            // 上一個(gè)
            $(".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)
                }
            })
            // 下一個(gè)
            $(".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)
                }
            })
            //設(shè)置一個(gè)定時(shí)器
            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)
            })
            // 點(diǎn)擊圓圈
            $(".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"
                })
            })
            // 手動(dòng)拖拽===============================================================================
            $(".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>

原文作者：匆匆那年_海，博客主頁(yè)：http://www.itdecent.cn/u/910c0667c515
95后前端漢子，愛編程、優(yōu)秀、聰明、理性、沉穩(wěn)、智慧的程序猿一枚。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容