【Javascript】【jQuery】jQuery实现轮播图

实现一个完整的轮播图用到的知识点 ?元素在父容器中水平垂直居中 ?利用CSS生成圆点 ?让图片和父容器一样大，并隐藏多余部分 ?均匀滑动 ?循环滑动 ?自动循环滑动 ?点击圆点可以滑动到指定页面 ?点击按钮可以前后滑动 ?鼠标移入时，停止自动滑动 ?滑动过程中，不可操作

html代码

jQuery
		

			
			

				       
			

			

				     
			

			

				  
			

		

css代码

* {
    padding: 0;
    margin: 0;
}

#container {
    width: 800px;
    height: 450px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -225px;
    overflow: hidden;
}

#dot-list {
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -50px;
    margin-bottom: 10px;
    -webkit-user-select: none;
    z-index: 3;
}

#dot-list > span {
    width: 10px;
    height: 5px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-left: 5px;
    cursor: pointer;
    display: inline-block;
    background: white;
}

#dot-list > span.selected {
    background: deepskyblue;
}

#image-list {
    width: 5600px;
    height: 450px;
    position: absolute;
    font-size: 0px;
}

#image-list > img {
    width: 800px;
    height: 450px;
}

#buttons {
    width: 800px;
    height: 450px;
    position: absolute;
    font-size: 0px;
    z-index: 2;
}

#btn-pre {
    width: auto;
    height: 150px;
    cursor: pointer;
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -75px;
}

#btn-next {
    width: auto;
    height: 150px;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -75px;
}

#btn-pre:hover {
    background: rgba(255, 255, 255, 0.2);
}

#btn-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

js代码

$(() => {
    //获取需要使用的元素
    $container = $("#container");
    $imageList = $("#image-list");
    $images = $("#image-list>img");
    $dot = $("#dot-list>span");
    $pre = $("#btn-pre");
    $next = $("#btn-next");

    //图片大小
    const imageWidth = $container.width();
    //当前图片
    let currentPage = 0;
    //要滑到的图片
    let targetPage = 0;
    //正在滑动
    let moving = false;
    //滑动一次需要的时间
    const duration = 800;

    //默认显示第一张图片
    $imageList.css("left", -imageWidth);

    //默认选中第一个圆点
    $($dot[0]).addClass("selected");

    //定时自动滑动
    let intervalId = autoSlide();

    //鼠标移入时，取消滑动，移出时继续
    $container.hover(() => {
        clearInterval(intervalId);
    }, () => {
        intervalId = autoSlide();
    });

    //点击圆点，滑动至对应页面
    $dot.click(function () {
        let index = $(this).index();
        if (index != currentPage)
            moveToPage(index);
    });

    //点击向前向后按钮，滑动至上一页下一页
    $pre.click(() => {
        moveToPage(currentPage - 1);
    });
    $next.click(() => {
        moveToPage(currentPage + 1);
    });

    //自动滑动
    function autoSlide() {
        return setInterval(() => {
            moveToPage(currentPage + 1);
        }, 3000);
    }

    //滑动页面，向前-1，向后1，指定页面target-current
    function moveToPage(page) {
        if (moving)
            return;
        moving = true;
        targetPage = page;
        let pageSize = page - currentPage;
        //每20ms滑动一帧
        let interval = 20;
        let offsetX = -(currentPage + 1) * imageWidth;
        let dx = pageSize * imageWidth * interval / duration;
        let intervalId = setInterval(() => {
            offsetX -= dx;
            $imageList.css("left", offsetX);
            //滑动完成
            if (offsetX == -(targetPage + 1) * imageWidth) {
                //如果滑动到首尾的辅助元素，则瞬移到对应的真实元素
                if (targetPage == 5)
                    targetPage = 0;
                if (targetPage == -1)
                    targetPage = 4;
                $imageList.css("left", -(targetPage + 1) * imageWidth);
                //同步变更圆点样式
                $($dot[currentPage]).removeClass("selected");
                $($dot[targetPage]).addClass("selected");
                //滑动结束，清除定时器
                clearInterval(intervalId);
                currentPage = targetPage;
                moving = false;
            }
        }, interval);
    }
});

效果图