SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
window.onload = function () {
    const doms = {
        carouselList: document.querySelector('.carousel-list'),
        arrowLeft: document.querySelector('.carousel-arrow-left'),
        arrowRight: document.querySelector('.carousel-arrow-right'),
        indicator: document.querySelectorAll('.indicator span')
    }
    let currentIndex = 0;

    function moveTo(index) {
        doms.carouselList.style.transform = `translateX(-${index * 100}%)`
        doms.carouselList.style.transition = '.5s'

        // 去掉导航点选中效果
        let active = document.querySelector('.indicator span.active')
        active.classList.remove('active')
        // 添加选中效果
        doms.indicator[index].classList.add('active')
        currentIndex = index
    }

    // 给导航点添加事件
    doms.indicator.forEach((item, i) => {
        item.onclick = function () {
            moveTo(i);
        }
    })
    // 复制第一张放最后，最后一张图片放第一张之前
    function init() {
        let lastImg = doms.carouselList.lastElementChild.cloneNode(true)
        let firstImg = doms.carouselList.firstElementChild.cloneNode(true)

        doms.carouselList.appendChild(firstImg)
        doms.carouselList.insertBefore(lastImg, doms.carouselList.firstElementChild)
        lastImg.style.position = 'absolute'
        lastImg.style.transform = 'translateX(-100%)'
    }

    let indicatorLength = doms.indicator.length;
    function preSlide() {
        if (currentIndex === 0) {
            doms.carouselList.style.transition = 'none'
            doms.carouselList.style.transform = `translateX(-${indicatorLength * 100}%)`
            doms.carouselList.clientHeight
            moveTo(indicatorLength - 1)
        } else {
            moveTo(currentIndex - 1)
        }
    }
    function nextSlide() {
        if (currentIndex === doms.indicator.length - 1) {
            doms.carouselList.style.transition = 'none'
            doms.carouselList.style.transform = 'translateX(100%)'
            doms.carouselList.clientHeight
            moveTo(0)
        } else {
            moveTo(currentIndex + 1)
        }
    }

    doms.arrowLeft.onclick = function () {
        preSlide();
    }

    doms.arrowRight.onclick = function () {
        nextSlide()
    }

    function start(time = 1000) {
        setInterval(() => {
            nextSlide()
        }, time)
    }
    start()
    init()

}

            
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		.carousel-container {
			margin: 0 auto;
			position: relative;
			width: 500px;
			height: 300px;
			/* overflow: hidden; */
			background-color: #ccc;
		}

		.carousel-container .carousel-list {
			position: relative;
			display: flex;
			height: 100%;
			width: 100%;
		}

		.carousel-container .carousel-list .slide {
			flex: 0 0 100%;
			height: 100%;
			width: 100%;
		}

		.slide a {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 100%;
		}

		.slide a img {
			width: 100%;
		}

		.carousel-container .carousel-arrow {
			display: none;
			position: absolute;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			color: white;
			text-align: center;
			line-height: 36px;
			cursor: pointer;

			background-color: rgba(31, 45, 61, .2);
		}

		.carousel-container:hover .carousel-arrow {
			display: block;
		}

		.carousel-container:hover .carousel-arrow:hover {
			background-color: rgba(31, 45, 61, .4);
		}

		.carousel-container .carousel-arrow-left {
			top: 50%;
			left: 2%;
			transform: translateY(-50%);
		}

		.carousel-container .carousel-arrow-right {
			top: 50%;
			right: 2%;
			transform: translateY(-50%);
		}

		.carousel-container .indicator {
			display: flex;
			position: absolute;
			left: 50%;
			top: 90%;
			transform: translateX(-50%)
		}

		.carousel-container .indicator span {
			margin: 2px 5px;
			padding: 3px;
			width: 5px;
			height: 5px;
			border: 1px solid white;
			border-radius: 5px;
		}

		.active {
			background-color: #fff;
		}
	</style>
</head>


<body>
	<div class="carousel-container">
		<div class="carousel-list">
			<div class="slide">
				<a href="">
					<img
            src="https://ts4.cn.mm.bing.net/th?id=OIP-C.kB-Ovasi0GW67-rmwnAcwAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2">
        </a>
      </div>
      <div class="slide">
        <a href="">
          <img
            src="https://ts1.cn.mm.bing.net/th?id=OIP-C.QPH1IBosDYBqaU3O6wV3YAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"></a>
      </div>
      <div class="slide">
        <a href="">
          <img
            src="https://ts2.cn.mm.bing.net/th?id=OIP-C.P3NSGTdAYdyqy5zJpb5QXQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
            alt=""></a>
      </div>
    </div>
    <div class="carousel-arrow carousel-arrow-left">&lt</div>
    <div class="carousel-arrow carousel-arrow-right">&gt</div>
    <div class="indicator">
      <span class="active"></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>
 
</html>