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

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

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

直接上代码

1.样式+布局

    

        
4
        
1
        
2
        
3
        
4
        
1
    
    

        

        

        

        

    
    
<
    
>

2.声明数据

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');
})

最后，完整代码

    
        
        
        
        
        
    

    
        

            

                
4
                
1
                
2
                
3
                
4
                
1
            
            

                

                

                

                

            
            
<
            
>
        
        
        
    

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